Question

我的视图中有一个输入绑定到范围属性，如下所示：

<input ng-model="searchTerm">

输入文本后，可以使用它来过滤转发器：

<ul>
   <li ng-repeat="item in Array | filter: searchTerm"></li>
</ul>

这很好，但是当我想要在控制器中过滤数组并重复使用此过滤后的数组时，我遇到了问题：

$scope.filteredArray = $filter('filter')($scope.array, $scope.searchTerm);

<ul>
  <li ng-repeat="item in filteredArray"></li>
</ul>

当我在输入中输入文本时，searchTerm属性不会更新已过滤的数组。我已经能够通过在输入中添加ng-keyup指令来监视输入的文本并相应地更新过滤后的数组来实现它：

在视图中：

<input ng-keyup="updateFilteredArray()" ng-model="searchTerm">

<ul>
  <li ng-repeat="item in filteredArray"></li>
</ul>

在控制器中：

$scope.filteredArray = $filter('filter')($scope.array, $scope.searchTerm);

$scope.updateFilteredArray = function() {
   $scope.filteredArray = $filter('filter')($scope.array, $scope.searchTerm);
}

这很好用，但我觉得我需要在控制器中定义filteredArray属性和updateFilteredArray方法。任何人都可以建议，如果这是我应该这样做的方式，或者有没有办法更新过滤器没有ng-keyup指令？我认为2路数据绑定会否定需要一个特定的方法来更新过滤后的数组，并且当输入文本时，属性会在视图和控制器中的任何地方更新？

Answer 1

试试这个：

<ul>
   <li ng-repeat="item in filteredArray = (array | filter: searchTerm)"></li>
</ul>

如果这样做，$ scope.filteredArray将始终在控制器中更新 - 不需要方法。

Answer 2

您只需使用$watch即可在不使用searchTerm指令的情况下观察ng-keyup：

控制器：

$scope.$watch('searchTerm', function(newValue, oldValue) {
  $scope.filteredArray = $filter('filter')($scope.array, newValue);
});

在视图中更改时，angular $ scope属性在控制器函数中不更新

2 个答案: