Question

Plunker：http://plnkr.co/edit/u3olPFyiT7tFdKKVvzZf?p=preview

我有一个列表和一个过滤所述列表的输入。

如果你看一下＆＃34;结果＆＃34;的数字。在您键入的屏幕上，这是正确的。但是如果你看一下控制台中的数字，它似乎总是落后一步。

为什么呢？以及如何解决？

JS：

  $scope.users = [
    'mike',
    'john',
    'pete'
  ]

  $scope.results = [];

  $scope.count_results = function() {
    console.log($scope.results.length)
  }

HTML：

<input type="text" class="form-control" ng-model="user_name" ng-change="count_results()">
<ul class="dropdown-menu">
    <li ng-repeat="user in results = (users | filter: user_name) | limitTo: 3">{{user}}</li>
</ul>
Results: {{results.length}}

Answer 1

原因是在过滤器过滤列表之前执行了ng-change。在执行ng-change时，result未设置为新列表，因此控制台输出在过滤之前显示旧列表的长度。

修改

您可以在ng-change mehtod内部而不是视图中执行过滤时解决此问题。然后只显示结果。查看我的plunker

$scope.count_results = function() { $scope.results = $filter('filter')($scope.users, $scope.user_name); console.log($scope.results.length) }

Answer 2

ng-model和ng-change都会向其应用的输入添加change事件侦听器。当您键入输入时，将执行事件处理程序（其中包括count_results）。事件侦听器会导致模块值更改并触发新的$digest周期。

$digest个周期是angular将旧模型值与新模型值进行比较并相应地更新视图的位置。当应用过滤器时，应用更新的标准来缩小列表范围。

你添加ie

<span class="{{count_results()}}"></span>

您会看到多次打印console.log，最后一个值始终同步。然而，这是非常无用的，我怀疑你更希望在你的控制器中有$watch：

$scope.$watch('results.length', function(newValue, oldValue){
   console.log('new value is', newValue);
});

Answer 3

您可以使用$watch处理它。我按如下方式编辑代码：

http://plnkr.co/edit/R3QRa1bhGyNwAeU6OOVb?p=preview

为什么ng-change在控制台中落后一步呢？

3 个答案: