使用filter创建数组,然后使用该数组过滤ng-options

时间:2015-07-25 16:15:25

标签: javascript arrays angularjs angularjs-ng-repeat ng-repeat

  1. 我正在使用isteven-multi-select从select元素的多个选项中输出一个对象数组。

    [
      { category: "Adventure", ticked: true },
      { category: "Strategy", ticked: true }
    ]
    

  2. 2.然后使用angular.forEach将对象数组更改为类别值数组。

    $scope.testOutput = function () {
        angular.forEach($scope.output, function(value, prop, obj) {
            var categoryFiltered = [];
    
            categoryFiltered.push(value.category);
            console.log(categoryFiltered);
        });
    };
    
    categoryFiltered = ["Adventure", "Strategy"];
    


    3.现在我需要使用categoryFiltered数组来过滤掉ng-repeat中的其他类别。

    HTML
    
    ul
      li(ng-repeat='item in items | filter: {categories: categoryFiltered')
    


        MongoDB填充项目

            {
              year: 1962,
              categories: ["Adventure"]
            }, {
              year: 1972,
              categories: ["Fishing"]
            }, {
              year: 1982,
              categories: ["Strategy"]
            }
    

    实现这一目标的最佳方法是什么?

1 个答案:

答案 0 :(得分:0)

编写自定义过滤器,然后您可以根据需要过滤类别(例如,您是否要过滤与指定的所有类别匹配的项目?或仅过滤一些?)。

以下是一个笨拙的例子:http://plnkr.co/edit/Lv11QWumN7ktjfS15RpY?p=preview

主要部分,定义过滤器:

app.filter('filterByCategories', function() {
    return function(input, categories) {
      // Input is the array to be filtered, categories is the list of
      // categories to filter by
      input = input || [];
      categories = categories || [];

      var output = [];
      for (var i = 0; i < input.length; i++) {
        for (var j = 0; j < categories.length; j++) {
          // If input matches any of the categories, then add it to the list
          if (input[i].categories.indexOf(categories[j].trim()) >= 0) {
            output.push(input[i]);
            break;
          }
        }
      }

      return output;
    };
  })

然后您可以像这样使用自定义过滤器:

<li ng-repeat="item in data | filterByCategories: filterStr.split(',')">

或者:

<li ng-repeat="item in data | filterByCategories: ['Adventure', 'Strategy']">