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复选框布尔的布尔值
一个value属性，一个由UI滑块调整的数字（1-5）

我想根据每个所选$scope.companies的{{1}}来过滤company.ratings[i] >= issue[i].value。如果未选择issue[i]，则不应影响过滤器。

相关问题是观察issue更改的最佳方式是什么。例如当用户选择/取消选择问题或调整滑块时。

非常感谢！

Answer 1

过滤器

这是一个goodRatingsOnly过滤器，可根据$scope.companies数组的内容过滤$scope.issues数组。有几个循环，它搜索不返回记录的原因，即当找到差评时。

  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;
      });
    }
  });

样本使用

在控制器中：

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

或视图中的ng-repeat：

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

演示

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

Answer 2

我也设法以这种方式解决它不确定它可能是多么理想的解决方案。

app.filter('issue', function($filter) {

  return function(list, filterList) {

    nullify();

    return $filter("filter")(list, function(listItem){
      if (listItem.ratings_ordered[0] >= filterList[0].value &&
          listItem.ratings_ordered[1] >= filterList[1].value &&
          listItem.ratings_ordered[2] >= filterList[2].value &&
          listItem.ratings_ordered[3] >= filterList[3].value &&
          listItem.ratings_ordered[4] >= filterList[4].value &&
          listItem.ratings_ordered[5] >= filterList[5].value &&
          listItem.ratings_ordered[6] >= filterList[6].value &&
          listItem.ratings_ordered[7] >= filterList[7].value &&
          listItem.ratings_ordered[8] >= filterList[8].value &&
          listItem.ratings_ordered[9] >= filterList[9].value &&
          listItem.ratings_ordered[10] >= filterList[10].value &&
          listItem.ratings_ordered[11] >= filterList[11].value
      ) {
        return listItem;
      }
   });

   function nullify() {
     filterList.forEach(function(issue) {
       if (!issue.selected) {
         issue.value = null;
       }
     });
   }

  }
});

其中list = $scope.companies和filterList = $scope.issues。

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

2 个答案: