如何在变量中获取角度"| filter"表达式的结果数组？

Question

在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]在变量(例如范围变量)中获取过滤器的相应结果数组,例如当前显示的s？

Answer 1

实际上,您可以在角度表达式中将新变量分配给范围.所以最简单的解决方案就是做<tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">.filteredPhones现在是当前范围内的变量 - 请参阅此plnkr示例.

Answer 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在$ scope中可用,您可以filteredArray在代码段中用作表达式.

所有这些实际上应该记录在http://docs.angularjs.org/api/ng.$filter和http://docs.angularjs.org/api/ng.filter:filter中.但是,第一个链接的文档太稀疏了,你真的只能从注释到第二个链接.我尝试将其添加到文档中,但是在克隆角度并构建文档之后,通过浏览器访问它们根本无法正常工作并且导航API无声地失败而没有任何有用的错误,所以我放弃了.