配列内の項目のリストを含む角度フィルタ

Question

私は、ユーザと興味のあるオブジェクトの配列を持っています。私はfilter興味に基づいてリストにしたいと思います。ユーザーは複数の関心を持つことができ、選択した関心のチェックボックスをオンにすると、その関心に基づいてリストが除外されます。私はng-repeatに基本的なフィルタを使用しましたが、うまくいきません。

「スポーツ」を選択すると、「John」と「Rosaline」が表示されます。 「movies」と「reading」を選択すると、3人のユーザー全員が表示されます。 以下は私のコードです。

Plunker：https://plnkr.co/edit/A0ojO3MH8rDhFJVXlEAs?p=preview

ビュー：

<div ng-app="myApp" ng-controller="myController" style="padding:20px"> 
<input type="checkbox" ng-model="selection.reading" ng-true-value="'reading'" ng-false-value="''">reading 
<input type="checkbox" ng-model="selection.sports" ng-true-value="'sports'" ng-false-value="''">sports 
<input type="checkbox" ng-model="selection.movies" ng-true-value="'movies'" ng-false-value="''">movies 
<br><br> 
Selected Values: {{selectedValues}} 
<hr> 
    <div ng-repeat="d in data | filter: selectedValues"> 
     <h4> 
     Name: {{d.user}} 
     </h4> 

     <h4> 
     Interests: {{d.interests}} 
     </h4> 

     <hr> 

</div> 

コントローラー：

$scope.selection = {}; 
    $scope.data = [ 
     { 
      user: "John", 
      interests: ["reading","sports","movies"] 
     }, 
      { 
      user: "David", 
      interests: ["movies","reading"] 
     }, 
     { 
      user: "Rosaline", 
      interests: ["sports","movies"] 
     } 
    ]; 
    $scope.$watchCollection('selection', function() { 
       $scope.selectedValues = []; 
       angular.forEach($scope.selection, function (value, key) { 
        if (value) { 
         $scope.selectedValues.push(value); 
        } 
       }); 
      }); 

Answer 1

Here isこのような例でオブジェクトをフィルタリングする多くの方法の1つ。

この状況で$watchを使用せず、単純なngChangeディレクティブでチェックボックス機能を実装することをお勧めします。以下の例。フィルタリングデータについて

<input type="checkbox" ng-model="selection.reading" ng-change="selectInterest('reading')">reading 
<input type="checkbox" ng-model="selection.sports" ng-change="selectInterest('sports')">sports 
<input type="checkbox" ng-model="selection.movies" ng-change="selectInterest('movies')">movies 

$scope.selectInterest = function(interest){ 
    $scope.selection[interest] = !!$scope.selection[interest]; 
}; 

Iは、コントローラ機能のように、このフィルタを実装する（一例を簡単にするために）$filterを使用することをお勧めしますまたは。

$scope.filterUsers = function(user){ 
    return Object.keys($scope.selection).some(function (item) { 
    return user.interests.indexOf(item) >= 0 && $scope.selection[item]; 
    }); 
}; 

私の例のコード全体は、上のリンクでご覧になることができます。

Answer 2

あなたは、あなたのフィルタを維持することができますいくつかのアレイにおいて、例えば、 filterInterestsその後、あなたのHTMLは次のようになりますことができます：

<div ng-repeat="d in data"> 
    <div ng-show="hasInterest(d.interests, filterInterests)"> 
    // Your code here 
    </div> 
</div>  

そして、あなたの機能の意志は次のようになります。

function hasInterest(data, interests){ 
    var result = false; 
    // Iterate over interests from filter and check them all in provided data 
    for(var=i, i<interests.length, i++){ 
    if(data.indexOf(i) != -1) result = true  
    else result = false; 
    } 
    return result; 
} 

Answer 3

はNGリピートであなたのhtml

<div ng-repeat="d in data" ng-hide="selectedValues.length > 0 && !filteredData(d.interests)"> 
    <h4> 
    Name: {{d.user}} 
    </h4> 

    <h4> 
    Interests: {{d.interests}} 
</h4> 

    <hr> 

</div> 

を少し変更して、この機能を追加in script.js

   $scope.filteredData = function (data) { 
      var found = false; 
       for (var i = 0; i < $scope.selectedValues.length; i++) { 
        if (data.indexOf($scope.selectedValues[i]) !== -1) { found = true; break; } 
       } 
       return found; 
     }; 

ライブ例： https://plnkr.co/edit/y8tqNiIU6p3x8d9zcdzL?p=preview

これは機能します。ありがとう