在视图中更改时，控制器函数中的角度$scope属性不会更新

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);
});