Question

在角度中，您可以编写像

这样的过滤表达式

<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]，在变量（例如范围变量）中？

Answer 1

您实际上可以在角度表达式中为范围指定新变量。所以最简单的解决方案是<tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">。 filteredPhones现在是当前范围内的变量 - 请参阅this plnkr example。

Answer 2

在您的控制器中，您可以观看对query文字的更改，并使用等同于{expression} | filter: {expression}的Javascript $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更改时，已过滤的数组将在您的$ scope中以filteredArray的形式提供，您可以在代码段中使用filteredArray作为表达式。

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

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

2 个答案: