如何在filter参数中设置数组?

时间:2017-01-19 15:15:46

标签: angularjs

我有下一个清单

MAX_TASKS_PER_CHILD=1

我想将下一个参数传递给过滤器:

var companies = [
    {
        id:1,
        members : ['alex', 'john','nick']
    },
    {
        id:2,
        members : ['alex', 'john','nick']
    },
    {
        id:3,
        members : ['alex']
    },
    {
        id:3,
        members : ['nick']
    }
]

<div  ng-repeat="item in companies | filter:itemFilter track by item._id "></div>

但它不起作用。 该怎么办?

3 个答案:

答案 0 :(得分:0)

作为参数放置的表达式也可以是函数:

scope.itemFilter = function(value /*, index, array*/){
     return (value.members.indexOf("john") >= 0 || value.members.indexOf("nick") >= 0);
};

https://docs.angularjs.org/api/ng/filter/filter

答案 1 :(得分:0)

您可以根据自己的要求创建新的过滤器。

控制器:

$scope.names = ['john','nick'];

过滤器:

(function () {
    'use strict';

    angular
        .module('app')
        .filter('nameFilter', nameFilter);

    function nameFilter() {
        return nameFilter;

        function nameFilter(list, names) {
            var checkName = function (arr) {
                var members = names;
                members.map(function (val) {
                    if (arr.indexOf(val) !== -1) return true;
                });
                return false;
            }
            return list.filter(checkName)
        }
    }
})();

查看:

<div  ng-repeat="item in companies | nameFilter(names) track by item._id "></div>

答案 2 :(得分:0)

如果要动态设置过滤器,

app.filter('expenditurePayeeFilter', [
  function($filter) {
    return function(inputArray, searchArray) {
      if (!angular.isDefined(searchArray) || searchArray.length == 0) {
        return inputArray;
      }
      var data = [];
      var arrayContains = function(arr,sub) {
        var self = this;
        var result = sub.filter(function(item) {
          return arr.indexOf(item) > -1;
        });
        return sub.length === result.length;
      }
      angular.forEach(inputArray, function(item) {
        if(arrayContains(item.members,searchArray))
          data.push(item);
      });
      return data;
    };
  }
]);

此函数检查子数组是否包含/包含在主数组

  var arrayContains = function(arr,sub) {
    var self = this;
    var result = sub.filter(function(item) {
      return arr.indexOf(item) > -1;
    });
    return sub.length === result.length;
  }

var app = angular.module("app", []);
app.filter('expenditurePayeeFilter', [
  function($filter) {
    return function(inputArray, searchArray) {
      if (!angular.isDefined(searchArray) || searchArray.length == 0) {
        return inputArray;
      }
      var data = [];
      var arrayContains = function(arr,sub) {
        var self = this;
        var result = sub.filter(function(item) {
          return arr.indexOf(item) > -1;
        });
        return sub.length === result.length;
      }
      angular.forEach(inputArray, function(item) {
        if(arrayContains(item.members,searchArray))
          data.push(item);
      });
      return data;
    };
  }
]);
app.controller("ctrl", function($scope) {
  $scope.itemFilter = ['john', 'nick'];
  $scope.companies = [{
    id: 1,
    members: ['alex', 'john', 'nick']
  }, {
    id: 2,
    members: ['alex', 'john', 'nick']
  }, {
    id: 3,
    members: ['alex']
  }, {
    id: 3,
    members: ['nick']
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in companies | expenditurePayeeFilter:itemFilter">
    {{item.id}}::{{item.members}}
  </div>
</div>