配列プロパティに基づくAngularJSフィルタリスト

Question

AngularJSを使用して次のフィルタを作成するにはどうすればよいですか？

ここにはvisual diagram explaining the questionがあります。私は少しこれを把握しようとしていたと本当にいくつかの助けに感謝します。各companyがratingsというプロパティ有する

$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 ] 
        } 
        ... 
        ]; 

からissuesの所与のセットのためのスコアを表す数値（1-5）の配列を：

私は企業のリストを持っている

$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のインデックスに対応します。

それぞれ問題がありますUIスライダによって調整

• selected性、UIチェックボックス
• value性、番号（1-5）によってトグルブール

それぞれ選択されたのいずれかに基づいて$scope.companiesをフィルタリングしたいとします。issue[i]issueが選択されていない場合、フィルタには影響しません。

関連する質問は、$scope.issuesの変更を監視する最良の方法とはどのようなものでしょうか。例えばユーザーが問題を選択/選択解除したり、スライダーを調整したりするときに使用します。

ありがとうございました！

Answer 1

フィルター

ここ$scope.issues配列の内容に基づく$scope.companies配列をフィルタリングgoodRatingsOnlyフィルタです。いくつかのループでは、レコードを返さない理由、すなわち評価の悪さが見つかった場合に検索を行います。

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

またはビューのng-repeatオン：コントローラで

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

使用例

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である。