Javascript AngularJS:CSS类，ng重复，搜索框

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

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

如何根据搜索条件将CSS类应用于元素？

---

-即，使所有与搜索条件匹配的元素均为蓝色

使用

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>

这是一本书

如果您希望使用现有的

过滤器

实现，可以将其拉出并使用：

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

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

---

这是一把小提琴

{{babe}}


.babe name{颜色：蓝色；}
.babe hot{颜色：红色}
功能控制器（$scope）{
$scope.filter=''；
$scope.babeList=[‘安吉丽娜’、‘斯佳丽’、‘米拉’、‘梅根’]；
}

如果我理解正确，您希望使用与内置过滤器相同的功能（有史以来最差的名称），但不是删除未通过过滤器的项目，而是只希望突出显示通过过滤器的项目

实际值检查功能没有公开，但很容易从源代码中提取；这是

filterFilter

实现。您可以使用它来创建一个单值过滤器，该过滤器包装

谓词。check

函数。这一部分相当简单，现在您可以在单个值上运行默认筛选函数

app.filter('singleValueFilter', [function() {
  return function(valueToCheck, expression, comperator) {
    var predicates = [];
    predicates.check = function(value) {
      for (var j = 0; j < predicates.length; j++) {
        if(!predicates[j](value)) {
          return false;
        }
      }
      return predicates.length > 0;
    };
    switch(typeof comperator) {
      case "function":
        break;
      case "boolean":
        if(comperator == true) {
          comperator = function(obj, text) {
            return angular.equals(obj, text);
          };
          break;
        }
      default:
        comperator = function(obj, text) {
          text = (''+text).toLowerCase();
          return (''+obj).toLowerCase().indexOf(text) > -1;
        };
    }
    var search = function(obj, text){
      if (typeof text == 'string' && text.charAt(0) === '!') {
        return !search(obj, text.substr(1));
      }
      switch (typeof obj) {
        case "boolean":
        case "number":
        case "string":
          return comperator(obj, text);
        case "object":
          switch (typeof text) {
            case "object":
              return comperator(obj, text);
            default:
              for ( var objKey in obj) {
                if (objKey.charAt(0) !== '$' && search(obj[objKey], text)) {
                  return true;
                }
              }
              break;
          }
          return false;
        case "array":
          for ( var i = 0; i < obj.length; i++) {
            if (search(obj[i], text)) {
              return true;
            }
          }
          return false;
        default:
          return false;
      }
    };
    switch (typeof expression) {
      case "boolean":
      case "number":
      case "string":
        expression = {$:expression};
      case "object":
        for (var key in expression) {
          if (key == '$') {
            (function() {
              if (!expression[key]) return;
              var path = key;
              predicates.push(function(value) {
                return search(value, expression[path]);
              });
            })();
          } else {
            (function() {
              if (!expression[key]) return;
              var path = key;
              predicates.push(function(value) {
                return search(getter(value,path), expression[path]);
              });
            })();
          }
        }
        break;
      case 'function':
        predicates.push(expression);
        break;
      default:
        return false;
    }
    return predicates.check(valueToCheck);
  };
}]);

不起作用，因为编译后它实际上会呈现一个不引用作用域的模板：

<span ng-class="{ 'selected': false }">{{ listItem.name }}</span>

{{listItem.name}

实际上，您可以通过查看开发人员工具中的dom来验证这一点。即使过滤器的结果发生更改，它也会将dom更改为“显示选定对象为true”，但由于它不引用范围，因此应用步骤不会触发更新

---

此时，需要将listItem类选择器指向作用域的属性，下一个需要解决的问题是如何将作用域的属性设置为视图中指定的筛选器的结果。很抱歉，我没有答案，但希望这能为您提供足够的信息，缩小问题的范围。

Wow！这真的很复杂。为什么要经历这一切？当然，不要从“过滤器”过滤器复制代码。如果要重新使用过滤器，请不要复制和粘贴代码。您只需将其拔出并重新使用即可<代码>变量过滤器过滤器=$filter（'filter'）然后使用它：

返回filterFilter（[valueToCheck]，表达式，比较器）。长度>0@BrianGenisio说得好，昨晚午夜我的大脑被炸了。我会编辑您的代码笔，以便在两个示例中将整个对象传递给搜索函数，而不仅仅是文本属性。这是我回答这个问题的主要目的，我只是做得很差。太棒了，谢谢！不知道您可以直接使用filterFilter。
app.filter('singleValueFilter', [function() {
  return function(valueToCheck, expression, comperator) {
    var predicates = [];
    predicates.check = function(value) {
      for (var j = 0; j < predicates.length; j++) {
        if(!predicates[j](value)) {
          return false;
        }
      }
      return predicates.length > 0;
    };
    switch(typeof comperator) {
      case "function":
        break;
      case "boolean":
        if(comperator == true) {
          comperator = function(obj, text) {
            return angular.equals(obj, text);
          };
          break;
        }
      default:
        comperator = function(obj, text) {
          text = (''+text).toLowerCase();
          return (''+obj).toLowerCase().indexOf(text) > -1;
        };
    }
    var search = function(obj, text){
      if (typeof text == 'string' && text.charAt(0) === '!') {
        return !search(obj, text.substr(1));
      }
      switch (typeof obj) {
        case "boolean":
        case "number":
        case "string":
          return comperator(obj, text);
        case "object":
          switch (typeof text) {
            case "object":
              return comperator(obj, text);
            default:
              for ( var objKey in obj) {
                if (objKey.charAt(0) !== '$' && search(obj[objKey], text)) {
                  return true;
                }
              }
              break;
          }
          return false;
        case "array":
          for ( var i = 0; i < obj.length; i++) {
            if (search(obj[i], text)) {
              return true;
            }
          }
          return false;
        default:
          return false;
      }
    };
    switch (typeof expression) {
      case "boolean":
      case "number":
      case "string":
        expression = {$:expression};
      case "object":
        for (var key in expression) {
          if (key == '$') {
            (function() {
              if (!expression[key]) return;
              var path = key;
              predicates.push(function(value) {
                return search(value, expression[path]);
              });
            })();
          } else {
            (function() {
              if (!expression[key]) return;
              var path = key;
              predicates.push(function(value) {
                return search(getter(value,path), expression[path]);
              });
            })();
          }
        }
        break;
      case 'function':
        predicates.push(expression);
        break;
      default:
        return false;
    }
    return predicates.check(valueToCheck);
  };
}]);

<span ng-class="{ 'selected': {{ listItem | singleValueFilter:filterTerm }} }">{{ listItem.name }}</span>

<span ng-class="{ 'selected': false }">{{ listItem.name }}</span>