Подтвердить что ты не робот

Как получить массив результатов из выражения angular "| filter" в переменной?

В 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], которые в настоящее время отображаются, в переменной (например, переменной области)?

Ответ 1

Фактически вы можете назначить новые переменные для области видимости в выражении angular. Поэтому самым простым решением было бы сделать <tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">. filterPhones теперь является переменной в текущей области - см. этот пример plnkr.

Ответ 2

Внутри вашего контроллера вы можете просматривать изменения в тексте 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 был неудачным без какой-либо полезной ошибки, поэтому я отказался от этого.