AngularJS过滤记录中对应字段(数组)的值

AngularJS Filter records for corresponding value in a field (array) in record

本文关键字：数组 的值 字段 过滤 记录 AngularJS      更新时间：2023-09-26

我是一个AngularJS的新手，我一直试图得到一些答案，但没有运气，因此这篇文章。

我有一个对象数组(JSON)，在单个对象中，有一个名为categories的字段，该字段实际上是一个数组本身，可以保存多个值。

我要找的过滤器是，有一个"select"用户会选择&;select&;Value和所有在其类别数组中具有该值的记录应该向用户显示，其余的可以隐藏。这个"选择";有多种选择，但我正在考虑保持单一选择。但是因为我想提供最好的产品，如果你能帮助我解决多个和单个选择的问题，我将非常感激。

下面是示例数据:

var工作=[{"ID"10","Title":"SQAEngineer"Employer":"XXXX","Address":"XXXFloor"Email":"XXXX"ContactNumber":","Description":"1年经验!","Qualification"XXXX"LastApplyDate":"2016 - 08 - 26","Type":"1","CreatedDT":"2016-08-0613: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 t;12:27:17","CreatedBy" null,"Categories":["28"]}];

这里有两种不同的方法。一个非常简单，只需要使用基本的内置angularjs filter api，另一个是通过创建我们自己的自定义过滤器来完成的。

第一个(简单)方法

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

编辑-更新代码&基于评论的演示!工作演示 

<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>


第二种(更高级)方法

作业类别的多值选择器，返回包含所有所选类别匹配的所有作业。(即。如果选择了"25"answers"26"，则类别为["25"]的作业将返回false)

演示工作

这里我们必须创建一个自定义过滤器，因为尽管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>
相关文章：