html - 当按下过滤器和重置按钮时，如何更改过滤器图标的颜色？

Question

我有一个表格，每列都有一个过滤器图标。

<thead>
        <tr>
            <th ng-repeat="col in vm.columns">
                <a href="javascript:;" ng-click="vm.open(col)"> <i class="fa fa-filter"></i></a>                    
                    {{col.name}}
                    <span ng-show="vm.filters['AscendingBy'+col.name]"></span>
                </a>
            </th>
        </tr>
    </thead>

当我点击它时，我会看到不同的弹出窗口，让我可以过滤数据。我需要单击过滤器按钮，更改图标的颜色，但仅适用于当前列，当我单击重置时，它会将颜色恢复为原始颜色

<div class="transactions-filter-modal-footer">
<a style="cursor: pointer" ng-click="vm.close()">Reset</a>
<button class="btn btn-success" ng-click="vm.confirm()">Filter</button>

我怎样才能做到这一点？

标签： htmlangularjs

Answer 1

这可以使用ng-class来完成。

根据文档：

评估的结果可以是表示以空格分隔的类名的字符串、数组或类名到布尔值的映射。在地图的情况下，其值为真的属性的名称将作为 css 类添加到元素中。

在设置/重置过滤器的函数中，您可以为正在应用的过滤器设置一个标志，并使用 ng-class 根据标志的值有条件地将类应用于元素，或者（在下面的低效示例中） , 关于函数的返回值。

<thead>
        <tr>
            <th ng-repeat="col in vm.columns"
                ng-class="isFiltered(col)">
                <a href="javascript:;" ng-click="vm.open(col)"> <i class="fa fa-filter"></i></a>                    
                    {{col.name}}
                    <span ng-show="vm.filters['AscendingBy'+col.name]"></span>
                </a>
            </th>
        </tr>
    </thead>