2016-12-11 7 views
0

ng-repeatの他の配列に基づいて配列の結果をフィルタリングする方法を教えてください。ng-repeatループ内の他の配列の包含によるフィルタ配列

[ 
    [ 
    'gender': 'male', 
    'languages': ['German', 'English'], 
    'country': 'Marocco' 
    ], 
    [ 
    'gender': 'female', 
    'languages': ['German', 'French'], 
    'country': 'Kosovo' 
    ] 
] 

私は、このオブジェクトによってフィルタ処理するにしたい:私はフィルタリングする

アレイ

| filter:{'languages': ['Urdu', 'French'], 'country': ['Kosovo']} 

期待される結果:ここで

[ 
'gender': 'female', 
'languages': ['German', 'French'], 
'country': 'Kosovo' 
] 
+0

しかし、あなたは** **配列のオブジェクトを*していることはできませんJavaScriptで* ...あなたができる – JSelser

+0

@JSelser技術的に、あなたは配列や配列の配列を持つことができるようオブジェクトです。 – GillesC

+0

とにかく、上記のオブジェクトに無効な構文があります。 – trincot

答えて

1

があなたに基づい例ですコード。私はいくつかの重要な変更を行いました:

  1. データの配列はオブジェクトの配列です。

  2. 国をフィルタオブジェクト内の値に変更しました。まだ を配列にしたい場合は、カスタムの フィルタのコードを言語の場合と同じように変更してください。

var app = angular.module('myApp',[]); 
 

 
    app.controller('MyCtrl', ['$scope', function($scope) { 
 
     $scope.data= [ 
 
      { 
 
       'gender': 'male', 
 
       'languages': ['German', 'English'], 
 
       'country': 'Marocco' 
 
      }, 
 
      { 
 
       'gender': 'female', 
 
       'languages': ['German', 'French'], 
 
       'country': 'Kosovo' 
 
      } 
 
     ]; 
 
    }]); 
 

 
    // Custom filter for our objects 
 
    app.filter('myFilter', function() { 
 
     return function (people, filterPerson) { 
 
      var filtered = []; 
 

 
      // Check if any elements in checkArray are in sourceArray 
 
      var includesAny= function(checkArray,sourceArray){ 
 
       checkArray.forEach(function(element) { 
 
        if (sourceArray.includes(element)){return true;} 
 
       }); 
 
       return false; 
 
      }; 
 

 
      for (var i = 0; i < people.length; i++) { 
 
       var person = people[i]; 
 
       if (filterPerson.country && filterPerson.country != person.country) { 
 
        continue; 
 
       } 
 

 
       if (filterPerson.gender && filterPerson.gender != person.gender) { 
 
        continue; 
 
       } 
 

 
       if (filterPerson.languages && includesAny(filterPerson.languages,person.languages)) { 
 
        continue; 
 
       } 
 

 
       filtered.push(person); 
 
      } 
 
      return filtered; 
 
     }; 
 
    });
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 

 
    <title>AngularJS Example</title> 
 

 
    <!-- AngularJS --> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 

 

 
</head> 
 
<body ng-app="myApp"> 
 

 
<div ng-controller="MyCtrl"> 
 
    <h1>Unfiltered Data</h1> 
 
    <ul> 
 
     <li ng-repeat="person in data"> 
 
      {{ person }} 
 
     </li> 
 
    </ul> 
 

 
    <h1>Filtered Data</h1> 
 
    <ul> 
 
     <li ng-repeat="person in data | myFilter:{'languages': ['Urdu', 'French'], 'country': 'Kosovo'}"> 
 
      {{ person }} 
 
     </li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

関連する問題