35

在 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？

4

2 回答 2

81

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

于 2013-04-17T07:19:47.897 回答
19

在您的控制器内部，您可以查看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中。但是，第一个链接的文档太少了，您实际上只能从第二个链接的评论中获取它。我试图将它添加到文档中，但是在克隆 angular 并构建文档之后，通过浏览器访问它们根本不起作用，并且导航 API 无声无息地失败，没有任何有用的错误，所以我放弃了。

于 2013-04-17T02:42:37.440 回答