AngularJS过滤记录以获取记录中字段（数组）中的相应值

Question

所以我是 AngularJS 的新手，我一直试图为此找到某种答案，但没有运气，因此这篇文章。

我有一个对象数组（JSON），在单个对象中，有一个叫做categories的字段，这个字段本身就是一个数组，可以保存多个值。

我正在寻找的过滤器是，有一个“选择”，用户将选择一个“选择”值，所有在其类别数组中具有该值的记录都应该向用户显示，其余的可以隐藏。这个“选择”有多项选择，但我正在考虑将其保留为单选。但由于我想提供最好的产品，如果您能帮助我进行多选和单选，我将不胜感激。

这里是示例数据：

var 工作 = [{"ID":"10","Title":"SQA 工程师","雇主":"XXXX","地址":"XXX Floor","Email":"XXXX","ContactNumber":"","Description":"1 年 经验。","Qualification":"XXXX","LastApplyDate":"2016-08-26","Type":"1","CreatedDT":"2016-08-06 13:06:36","CreatedBy":null,"Categories":["25","28"]},{"ID":"8","Title":"Maid","Employer":" XXX","Address":"XXX","Email":"XXXX","ContactNumber":"XXXX","Description":"","Qualification":"NONE","LastApplyDate":"2016-08 -26","Type":"1","CreatedDT":"2016-08-06 12:27:17","CreatedBy":null,"Categories":["28"]}];

Answer 1

好的，这里有两种不同的方法。一种很简单，只使用基本的built-in angularjs filter api，另一种是通过创建我们自己的自定义过滤器来完成。

第一种（简单）方法

工作类别的单值选择器，返回包含与所选类别匹配的所有工作。

编辑 - 基于 cmets 更新代码和演示！ Working DEMO

<label>Category: 
    <select ng-model="category" ng-options="category.id as category.name for category in categories"></select>
</label>
<div class="results">
    <div class="job-listing" 
         ng-bind="job | json"
         ng-repeat="job in jobs | filter:{Categories: category}:true">
    </div>
</div>

第二种（更高级的）方法

工作类别的多值选择器，返回包含与 ALL 所选类别匹配的所有工作。 （即如果选择了“25”和“26”，则类别为 ["25"] 的作业将返回 false）

Working DEMO

这里我们必须创建一个自定义过滤器，因为尽管 Angular 的内置过滤器做了很多很棒的事情，但它也有其局限性。

我们的自定义过滤器（匹配所有搜索词）

app.filter("getMatches", function () {
  return function (items, options) {
    var options = options || {};
    var searchField = options.searchField || "";
    var searchTerms = options.searchTerms || [];
    if (searchField === "" || !searchTerms.length || (searchTerms.length === 1 && searchTerms[0] === '')) {
      return items;
    }
    return items.filter(function (item) {
      return !searchTerms.some(function(term) {
        return item[searchField].indexOf(term) === -1;
      });
    });
  }
});

修改后的过滤器（匹配任何搜索词）

app.filter("getMatches", function () {
  return function (items, options) {
    var options = options || {};
    var searchField = options.searchField || "";
    var searchTerms = options.searchTerms || [];
    if (searchField === "" || !searchTerms.length || (searchTerms.length === 1 && searchTerms[0] === '')) {
      return items;
    }
    return items.filter(function (item) {
      return searchTerms.some(function(term) { // notice the subtle difference here
        return item[searchField].indexOf(term) > -1; // and here
      });
    });
  }
});

支持 HTML

<select multiple ng-model="selectedCategories" ng-options="category for category in categories"></select>

<div class="job-listing" ng-bind="job | json"
     ng-repeat="job in jobs | getMatches:{searchField: 'Categories', searchTerms: selectedCategories}">
</div>