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

普朗克：

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

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

为什么?？如何解决呢

JS:

HTML:

{{user}

结果：{Results.length}

原因是在筛选器筛选列表之前执行了

ng change

。在执行

ng change

时，

结果

未设置为新列表，因此控制台输出在过滤前显示旧列表的长度

编辑：

当您在

ng change

方法中而不是在视图中执行过滤时，可以解决此问题。然后只显示结果。看我的

---

ng model

和

ng change

都向应用它们的输入添加一个

change

事件侦听器。在输入中键入时，将执行事件处理程序（其中包括您的

count\u结果

）。事件侦听器导致模块值更改并触发新的

$digest

循环

$digest

循环是angular将旧模型值与新模型值进行比较并相应更新视图的地方。此时，将使用更新的条件应用过滤器，以缩小列表范围

你加上

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

---

您可以使用

$watch

处理它。我编辑代码如下：

---

那么如何使控制台显示正确的

结果

编号呢？为什么部分相当简单…你想做什么？创建手表的方法存在严重缺陷。将为输入的每个字母添加新的手表。他正在给手表复配。不要在事件处理程序中创建它。还应该在回答中发布代码，并使用演示作为概念证明only@charlietfl-你的解决方案是什么？可以使用手表。。。但不要每次UI事件触发时都创建一个新的。缓慢键入

p..e..t..e

时，请查看控制台

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

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

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

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