如何将angular的"| filter"表达式的结果数组存储到变量中？

11 浏览
0 Comments

如何将angular的"| filter"表达式的结果数组存储到变量中？

在Angular中，你可以像这样编写过滤器表达式：




    

       {{phone.vendor}}
       {{phone.model}}

它会更新表格，只显示与你在输入框中输入的query文本匹配的手机。

如何在一个变量（例如一个作用域变量）中获取过滤器的相应结果数组，即当前显示的[phone object]？

0

2 答案

0 Comments

最近我在使用Angular框架进行开发时，遇到了一个问题：如何将一个Angular表达式的结果数组存储在一个变量中。经过一番研究，我找到了解决方法。

在控制器中，我们可以监听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("filter框中的新值:", newVal);
      // 这是“phones | filter: newVal”的等价JavaScript表达式
      $scope.filteredArray = $filter('filter')($scope.phones, newVal);
    });
}]);

每当query发生变化时，过滤后的数组将在$scope中作为filteredArray可用，并且您可以将filteredArray作为片段中的表达式使用。

这些内容实际上应该在Angular的官方文档中有所说明。然而，第一个链接的文档内容太过简单，我们只能从第二个链接的评论中获得相关信息。我尝试将其添加到文档中，但在克隆Angular并构建文档后，通过浏览器访问文档时却无法正常工作，并且API导航失败，没有任何有用的错误提示，所以我放弃了这个尝试。

在's的示例中，监视filteredPhones似乎不是一个好的解决方案（事件太多），所以如果您想在应用过滤器后添加一些逻辑，我认为这个版本更可取。

0
0 Comments

问题的出现的原因是在Angular表达式中无法直接获取过滤器的结果数组。解决方法是可以通过给$scope分配新变量的方式来获取过滤器的结果数组。具体的解决方法如下：

1. 在ng-repeat指令中使用括号将过滤器表达式括起来，并将结果赋值给一个新的变量，例如：<tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">。

2. 现在，filteredPhones是当前作用域中的一个变量，可以在代码中使用它。

3. 如果想要在query更改时得到相应的事件，可以使用$scope.$watch函数来监视query变量的变化。例如：$scope.$watch('query',function(newQuery,oldQuery){ ... });。

需要注意的是，有人反馈这种方法在他们的$scope中无法正常工作，filteredVariable始终为undefined。这可能需要特定版本的Angular才能正常工作。

可以参考下面的代码示例来理解解决方法的具体实现：




  
  


  
  

    

      {{phone.name}}
      {{phone.brand}}

希望以上内容对您有帮助！

0