2

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

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

我看到的行为如下：

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

4

1 回答 1

2

你是对的，你遇到了一个错误。我正在查看它，它与摘要周期中的问题有关，但解决起来似乎不是很简单，并且不稳定的版本已经解决了它（打开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。

于 2013-07-18T13:56:35.030 回答