Jak mogę uzyskać tablicę wyników wyrażenia kątowego "| filter" w zmiennej?

Question

W kątowe, można napisać wyrażeń filtrujących jak

<input type="text" ng-model="query"> 

<table> 
    <tr ng-repeat="phone in phones | filter: query"> 
     <td>{{phone.vendor}}</td> 
     <td>{{phone.model}}</td> 
    </tr> 
</table> 

i będzie aktualizować tabelę, aby wyświetlić tylko te telefony, które pasują do tekstu query wpisywane do input.

Jak uzyskać odpowiednią tablicę wyników filtru, np. [phone object] s, które są obecnie wyświetlane, w zmiennej (na przykład zmiennej zakresu)?

Answer 1

Rzeczywiście można przypisać nowe zmienne do zakresu w wyrażeniu kątowym. Więc najprostszym rozwiązaniem byłoby zrobienie <tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">. filtersPhones jest teraz zmienną w bieżącym zakresie - patrz this plnkr example.

Answer 2

Wewnątrz kontrolera, można obserwować zmiany w tekście query i użyć ekwiwalent JavaScript rozwoju {expression} | filter: {expression}, który jest $filter('filter') (stosując filtr o nazwie 'filter' z serwisu $filter, które trzeba wstrzyknąć).

Załóżmy, że Twój fragment kodu HTML jest kontrolowany przez kontroler MyController. Następnie można go zmienić na:

myApp.controller("MyController", ["$scope", "$filter", function($scope, $filter) { 

    $scope.$watch('query', function(newVal, oldVal) { 
     console.log("new value in filter box:", newVal); 

     // this is the JS equivalent of "phones | filter: newVal" 
     $scope.filteredArray = $filter('filter')($scope.phones, newVal); 
    }); 
}]); 

Kiedy twoi query zmiany, przefiltrowana tablica będzie dostępny jako filteredArray w $ zakresie, a można użyć filteredArray jako wyraz we fragmencie.

---

Wszystko to powinno być właściwie udokumentowane w http://docs.angularjs.org/api/ng.$filter i http://docs.angularjs.org/api/ng.filter:filter. Jednak dokumentacja pierwszego linku jest zbyt rzadka, że ​​tak naprawdę można ją dostać tylko z komentarzy do drugiego linku. Próbowałem dodać to do dokumentów, ale po sklonowaniu kątowym i budowaniu dokumentów, dostęp do nich za pośrednictwem przeglądarki po prostu nie zadziałał, a nawigacja interfejsu API przebiegła bezgłośnie, bez żadnego użytecznego błędu, więc zrezygnowałem z tego.