ng模型不会为文本过滤器重新计算单个按键的数组长度

ng-model does not recalculate length of array on single keypress for a textfilter

本文关键字：单个按 计算 数组 新计算 模型 文本 过滤器 文本过滤 ng      更新时间：2023-09-26

我有一个表，它使用过滤后的文本区域来构建过滤后的表并列出计数。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即可查看）。

所以我想你最好的选择是解决它，因为它可能不值得为你的特定需要而努力解决这个bug。当前，您正在设置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。

相关文章：