是否有可能通過在另一個數組中包含來過濾angular.js？

所以，如果我有一個數組：是否有可能通過在另一個數組中包含來過濾angular.js？

$scope.letters = 
[{"id":"a"}, 
{"id":"b"}, 
{"id":"c"}];

而另一個數組

$scope.filterBy = ["b","c","d"];

而且我希望有一些NG重複只出現在$ filterBy要過濾的項目$ scope.letters。

我希望能夠做一些事來的效果：

<span ng-repeat="{{letter in letters|filter: letter.id in filterBy }} > {{letter.id}} </span>

而且它打印B，C

我知道這是一個非常愚蠢的例子，但有沒有辦法根據另一個數組對象的內容過濾angular.js表達式？

來源

2013-03-16 infomofo

你應該嘗試類似的東西：

JS：

angular.module('Test', []); 

function Ctrl($scope) { 
    $scope.letters = [ 
    {id: 'a'}, 
    {id: 'b'}, 
    {id: 'c'} 
    ]; 

    $scope.filterBy = ['b', 'c', 'd']; 

    $scope.filteredLetters = function() { 
    return $scope.letters.filter(function (letter) { 
     return $scope.filterBy.indexOf(letter.id) !== -1; 
    }); 
    }; 
} 

Ctrl.$inject = ['$scope'];

HTML：

<div ng-repeat='letter in filteredLetters(letters)'>{{letter.id}}</div>

你可以試試live example。

來源

2013-03-16 21:45:40 ValeriiVasin

filteredLetters（）將被稱爲_every_摘要循環。因此，如果您在視圖中使用ng-model的輸入字段，則意味着每次擊鍵。將過濾器的結果存儲在新的$ scope屬性中會更好。如果'letters'或'filterBy'改變，使用$ watch（）es更新過濾結果。 – 2013-03-16 22:13:45

好點。謝謝你的建議。 – ValeriiVasin 2013-03-16 23:11:19

雖然它會起作用（提供的應用程序非常簡單），但我不會推薦使用這種方法 - 正如@MarkRajcok所提到的，它被稱爲每個摘要循環，意味着性能非常糟糕，我從類似於「Error：[$ rootScope：infdig] 10 $ digest（）迭代到達。中止！「 – 2016-10-25 15:55:23

更新

這裏有一個角模塊（基於@InviS回答）輕鬆實現您的角度應用程序中這個過濾器： filters-inArrayFilter

這裏的角過濾方法基於@InviS回答：

該過濾器應該是這樣的：

.filter('inArray', function($filter){ 
    return function(list, arrayFilter, element){ 
     if(arrayFilter){ 
      return $filter("filter")(list, function(listItem){ 
       return arrayFilter.indexOf(listItem[element]) != -1; 
      }); 
     } 
    }; 
});

其中列表是你濾波（這PARAM默認設置通過有角度的）的列表中，arrayFilter是您使用作爲過濾器的陣列，且元件是要在列表中過濾的屬性的名稱。

要使用此過濾器，你用你的NG-重複爲：

<div ng-repeat='letter in letters | inArray:filterBy:"id"'>{{letter.id}}</div>

其中inArray是過濾器，filterBy（此過濾器的第一個參數）是你的陣列進行匹配，並且「id」（第二個參數）是elem您想與陣列匹配的列表的名稱。

您可以使用角度過濾器方法嘗試此live example。

來源

2014-01-16 20:12:06 Cyberdelphos

如果我必須過濾多列，該怎麼辦？「鏈接」會這樣嗎？ – dreamer 2015-05-11 13:32:08

@dreamer你是什麼意思的多列？ – Cyberdelphos 2015-05-11 14:30:35

@Cyberdelphos如果object key是一個數字，你將如何過濾？使用$索引？ – alphapilgrim 2016-02-05 20:03:18

相當古老，但我需要它，我不得不改變它一點。這裏是我的過濾器「notInArray」

app.filter('notInArray', function($filter){ 
return function(list, arrayFilter, element){ 
    if(arrayFilter){ 
     return $filter("filter")(list, function(listItem){ 
      for (var i = 0; i < arrayFilter.length; i++) { 
       if (arrayFilter[i][element] == listItem[element]) 
        return false; 
      } 
      return true; 
     }); 
    } 
};

}）;

<md-chips ng-model="filter.SelectedValues" md-autocomplete-snap 
      md-require-match="true"> 
     <md-autocomplete 
      md-search-text="searchFilterChip" 
      md-items="val in filter.Values | notInArray:filter.SelectedValues:'Id'" 
      md-item-text="val.Name" 
      md-no-cache="true" 
      md-min-length="0"> 
     <span md-highlight-text="searchFilterChip">{{val.Name}}</span> 
     </md-autocomplete> 
     <md-chip-template> 
     {{$chip.Name}} 
     </md-chip-template> 
    </md-chips>

我認爲這可以改善，但在我的情況下不需要。

希望能幫助別人！

來源

2016-02-12 13:44:04

謝謝你有用 – Magico 2017-02-02 19:35:04

是否有可能通過在另一個數組中包含來過濾angular.js？

回答

相關問題