javascript - Angular JS - 使用相同的 ng-model 基于多个对象属性的 ng-repeat 过滤器对象数组

Question

我有一组看起来像的员工

$scope.Arr = [
           {'name':'John','title':'CEO','Age':'32'}, 
           {'name':'Jill', 'title':'Sales Executive', 'Age':'44'},
           {'name':'Alex','title':'Developer','Age':24}
          ];

我使用 ng-repeat 在 html 中呈现这个数组，并希望使过滤器工作，以便可以使用相同的输入控件的值来根据 name 以及标题。

<input type='text' data-ng-model='search.name' />

<div>
  <span data-ng-repeat="emp in Arr | filter:search">
  <p> {{emp.name}} </p>
  <p> {{emp.title}} </p>
  </span>
</div>

上面的代码只允许我根据员工姓名进行过滤

Answer 1

您可以使用过滤器根据姓名和职位进行搜索。

表达式“emp in Arr | filter: {name: $select.search, title: $select.search}”的默认 angularjs 过滤器在“name: $select.search”和“title: $”之间执行 AND选择.搜索"

编写一个自定义过滤器来执行或操作

var app = angular.module('myApp', []);

app.filter('customFilter', function() {
    return function(names, title) {
        var output = [];

        if(angular.isArray(names)) {
            names.forEach(function(item) {
                var nameMatch = false;

                var keys = Object.keys(title);
                for(var i=0; i<keys.length; ++i) {
                    var t = keys[i];
                    var text = title[t].toLowerCase();
                    if(item[t].toString().toLowerCase().indexOf(text) !== -1) {
                        nameMatch = true;
                        break;
                    }
                }

                if(nameMatch) {
                    output.push(item);
                }
             });
          }
          else {
              output = names;
       }

       return output;
   };
});

基本上，此代码可让您根据姓名和职务进行过滤。希望这会有所帮助。