В angular вы можете написать выражения фильтра, такие как
<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>
и он обновит таблицу, чтобы отобразить только телефоны, которые соответствуют тексту query, который вы вводите в input.
Как я могу получить соответствующий массив результатов фильтра, например. [phone object], которые в настоящее время отображаются, в переменной (например, переменной области)?
Фактически вы можете назначить новые переменные для области видимости в выражении angular. Поэтому самым простым решением было бы сделать <tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">. filterPhones теперь является переменной в текущей области - см. этот пример plnkr.
Внутри вашего контроллера вы можете просматривать изменения в тексте query и использовать эквивалент Javascript {expression} | filter: {expression}, который равен $filter('filter') (используя фильтр с именем 'filter' из службы $filter, который у вас есть для инъекций).
Скажем, ваш HTML-фрагмент контролируется контроллером MyController. Затем вы можете изменить его на:
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);
});
}]);
Всякий раз, когда изменяется ваш query, фильтрованный массив будет доступен как filteredArray в вашей области $, и вы можете использовать filteredArray как выражение в своем фрагменте.
Все это должно быть документировано в http://docs.angularjs.org/api/ng.$filter и http://docs.angularjs.org/api/ng.filter:filter. Однако документация по первой ссылке слишком скудна, вы можете действительно получить ее только из комментариев ко второй ссылке. Я попытался добавить его в документы, но после клонирования angular и создания документов, доступ к ним через браузер просто не работал, и переход по API был неудачным без какой-либо полезной ошибки, поэтому я отказался от этого.