javascript - AngularJS:CSS 类、ng-repeat、搜索框

Question

在 AngularJS 中，我有一个 ng-repeat 元素和一个搜索框。

我可以在 ng-repeat 上使用过滤器来根据搜索条件显示/隐藏元素。

如何根据搜索条件将 CSS 类应用于元素？- 即使所有符合搜索条件的元素变为蓝色。

Answer 1

如何使用 ng-class 有条件地应用类？

<input ng-model="search" type="text" />
<ul>
    <li ng-repeat="item in items" ng-class="{'found': find(item.text, search)}">{{item.text}}</li>
</ul>

然后在你的 Controller 中，像这样:

$scope.find = function(text, search) {
    if(!text || !search) return false;
    return text.toLowerCase().indexOf(search.toLowerCase()) >= 0;
};

这是一个working CodePen .

如果你更喜欢使用现有的filter实现，你可以把它拉出来使用:

function TestCtrl($scope, $filter) {
    var filterFilter = $filter('filter');

    $scope.findViaFilter = function(text, search) {
        if(!text || !search) return false;
        return filterFilter([text], search).length > 0;
    };
}