AngularJS 基于数组属性的过滤器列表

Question

如何使用 AngularJS 创建以下过滤器？

这是一个 visual diagram explaining the question .我一直在努力解决这个问题，非常感谢您的帮助。

我有一个公司列表:

$scope.companies = [ 
                     { 
                       id:"company_01",
                       ratings: [ 5, 5, 5, 5, 0, 5, 4, 4, 1, 3, 0, 0 ]
                     },
                     { 
                       id:"company_02",
                       ratings: [ 5, 4, 5, 4, 0, 5, 4, 4, 1, 3, 0, 0 ]
                     }
                     ...
                   ]; 

每个 company 都有一个名为 ratings 的属性——一个数值数组 (1-5)，代表一组给定的 issues:

 $scope.issues = [
                  {
                    label:'Carbon Footprint', 
                    selected: true, 
                    value: 3
                  },

                  ...

                  {
                    label:'Consumer Health', 
                    selected: false, 
                    value: null
                  },

                  ...

                  {
                    label:'Employee Satisfaction', 
                    selected: true, 
                    value: 5
                  },

                  ...
                ];

$scope.companies[i].ratings 的索引对应于$scope.issues 的索引。

每个问题都有:

• selected 属性，由 UI 复选框切换的 bool 值
• value 属性，一个由 UI slider 调整的数字 (1-5)

我想根据是否为每个选定的 company.ratings[i] >= issue[i].value 过滤 $scope.companies问题[i]。如果未选择 issue，它应该不会影响过滤器。

一个相关的问题是观察 $scope.issues 变化的最佳方式是什么。例如当用户选择/取消选择问题或调整 slider 时。

非常感谢!

Answer 1

过滤器

这是一个 goodRatingsOnly 过滤器，它根据 $scope.issues 数组的内容过滤 $scope.companies 数组。通过几个循环，它会搜索不返回记录的原因，即当发现评级不佳时。

  app.filter("goodRatingsOnly", function thisFilter() {
    return function(companies, issues){
      return companies.filter(function(comp){
        var poorRatingFound = false;
        issues.forEach(function(issue, i){  
          if (issue.selected){
            if (!poorRatingFound){
              poorRatingFound = comp.ratings[i] < issue.value;
              console.log(poorRatingFound);
            }
          }
        });
        return !poorRatingFound;
      });
    }
  });

示例用法

在 Controller 中:

$scope.filteredCompanies = $filter("goodRatingsOnly")($scope.companies, $scope.issues); 

或者在 View 中的 ng-repeat 上:

ng-repeat="comp in companies | goodRatingsOnly: issues"

演示

CodePen: Using an array to filter another array in a custom filter