javascript - ng-model不会在单个按键上重新计算textfilter的数组长度

我有一个表，该表使用过滤的文本区域构造过滤的表并列出计数。 DOM如下。

 <div filter-input></div>

 <table>
    <tr ng-repeat='item in filtered=(mySourceJSON | filter:filterInputService.searchText)'></tr>
    .. .. ..
    .. .. ..
 </table>

将过滤器输入作为指令：

angular.module('myApp')
.directive('filterInput', function () {
return {
  controller: 'FilterInputCtrl',
  templateUrl: 'views/filter_input.html',
  restrict: 'A',
  link: function(scope, el, attr){
  }
};

}）;

使用以下控制器：

angular.module('myApp')
 .controller('FilterInputCtrl', function ($scope, filterInputService) {
   $scope.filterInputService = filterInputService;
});

模板的内容为：

 <div>
   <span>
    <input  ng-model='filterInputService.searchText'/>
   </span>
   <span>
      Showing {{filtered.length}} / {{gridItems.length}}
   </span>
 </div>

该服务是一个简单的占位符，可在初始化时将searchText设置为empty string。

我看到的行为如下：

当我在过滤器输入中键入一个字符时，表将更新并隐藏与过滤器不匹配的项目，但是，过滤的项目数直到输入第二个字符后才会更新。究竟是什么触发了这一点？为什么作用域直到第二个字符才更新？如何避免这种情况？

最佳答案

没错，您遇到了一个错误。我正在查看它，它与摘要周期中的一个问题有关，但是解决起来似乎不是很简单，并且不稳定的版本已经可以解决它（打开Plnker并将Angular版本更改为1.1.5查看）。

因此，我想您最好的选择是解决它，因为根据您的特定需要解决该错误可能不值得。当前，您正在通过filtered设置ng-repeat。您要做的就是$watch过滤器并自己应用过滤器。

基本上：

将绑定更改为：

<tr ng-repeat='item in filtered'>

然后，在您的控制器中，注入$filter服务并存储对集合过滤器的引用。 $watch过滤器字符，并创建filtered数组：

.controller('FilterInputCtrl', function ($scope, $filter, filterInputService) {
  var dfFilter = $filter('filter');

  $scope.filterInputService = filterInputService;

  $scope.$watch('filterInputService.searchText', function(value) {
    $scope.filtered = dfFilter($scope.mySourceJSON, value);
  });
});

这是一个有效的Plnker。