2レベルの反復でアンギュラリスフィルタ

私はngRepeat内にngRepeatを持っています。
フィルタはフォルダの名前またはフォームの名前と一致する必要があります。現在、フィルタは機能していますが、すべてのプロパティをチェックしています。
フォルダーとフォームの「名前」プロパティのみをフィルターで確認します。ここで 2レベルの反復でアンギュラリスフィルタ

はplunkerです：plnkr.co/edit/Y5HXbtAB3S7KxGqchQZm?p=preview

出典

2017-07-17 trex tiab

フォルダレベルで検索するときに検索する場合plunk https://plnkr.co/edit/Y5HXbtAB3S7KxGqchQZm?p=preview –

まず私は、フォームとの混同を防ぐために、「フォルダ名」のようなものにフォルダ「名前」プロパティを変更することをお勧めします "名前 "プロパティ。

私が正しく理解していれば、あなたはフォルダが2例に表示する：名前が検索に一致する形の

一つ。
フォルダ名自体が検索と一致します（すべての子も表示します）。

UPDATE：あなたは、私はこのコードをチェックアウトし、操作し示すアレイカスタム関数を使用する代わりに、フィルタを使用してすることが好ましいたかった何のため

。ここ

// Code goes here 
 
var app = angular.module("app",[]); 
 

 
app.controller("ctrl",function($scope){ 
 

 
    var folder = [ 
 
    { 
 
    "DisplayName_MO": "Templates", 
 
    "Key": 555974658, 
 
    "folderName": "Templates", 
 
    "forms": [ 
 
     { 
 
     "Key": 751017984, 
 
     "Revision": 2, 
 
     "Name": "form1" 
 
     }, 
 
     { 
 
     "Key": 751017985, 
 
     "Revision": 2, 
 
     "Name": "form2" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "DisplayName_MO": "Archive", 
 
    "Key": 555974659, 
 
    "folderName": "Archive", 
 
    "forms": [ 
 
     { 
 
     "Key": 751017986, 
 
     "Revision": 2, 
 
     "Name": "trex" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "DisplayName_MO": "Inbox", 
 
    "Key": 555974660, 
 
    "folderName": "Inbox", 
 
    "forms": [ 
 
     { 
 
     "Key": 751017987, 
 
     "Revision": 2, 
 
     "Name": "View" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "DisplayName_MO": "Outbox", 
 
    "Key": 555974661, 
 
    "folderName": "Outbox", 
 
    "forms": [ 
 
     { 
 
     "Key": 751017988, 
 
     "Revision": 2, 
 
     "Name": "Star" 
 
     } 
 
    ] 
 
    } 
 
] 
 

 
    $scope.updateFilteredArray = function(){ 
 
    var tempArray = JSON.parse(JSON.stringify(folder)), //create a deep copy of the originl array 
 
    searchTerm = $scope.searchText; 
 
    if(searchTerm){ 
 
    searchTerm = searchTerm.toLowerCase(); 
 
     for(var i = 0; i < tempArray.length; i++){ 
 
     if(tempArray[i].folderName.toLowerCase().indexOf(searchTerm) == -1){ 
 
      var formsArray = tempArray[i].forms; 
 
      for(var y = 0; y < formsArray.length; y++){ 
 
      if(formsArray[y].Name.toLowerCase().indexOf(searchTerm) == -1){ 
 
       formsArray.splice(y, 1); 
 
       y--; 
 
      } 
 
      } 
 
      if(formsArray.length == 0){ 
 
      tempArray.splice(i, 1); 
 
      i--; 
 
      } 
 
     } 
 
     } 
 
    } 
 
    $scope.filteredArray = tempArray; 
 
    } 
 

 
    $scope.filteredArray = folder; 
 
    
 
})

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="app"> 
 
    <div ng-controller="ctrl"> 
 
     
 
     <input ng-model="searchText" ng-change="updateFilteredArray()"/> 
 
     
 
     <ul> 
 
     <li ng-repeat="x in filteredArray"> 
 
      {{x.folderName}} 
 
      <ul><li ng-repeat="y in x.forms">{{y.Name}}</li></ul> 
 
      
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-07-17 18:57:38

それは今例えば、フォルダだけでなく、形を与えるべきです'templates'はフォーム名 –

を表示していないので、フォルダレベルで一致するものがあれば、すべての子供が表示されるはずです。子どものどれも検索語句に一致しない場合でも？ –

はいフォルダレベルで一致するものがある場合は、すべての子が表示されます。 –

2レベルの反復でアンギュラリスフィルタ

答えて

関連する問題