AngularJS - 使用自定义过滤器和 ngClick 更新相同的 ng-repeat

Question

我有一个简单的ng-repeat。 ng-reapeat 可以通过两种方式填充，第一种是输入一个值并单击提交按钮，第二种是输入值，列表会自动更新。

我发现的问题是，当用户点击 Sumbit 时，使用过滤器的 ng-repeat 不会更新。

这是一个笨蛋（输入帮助）：http://plnkr.co/edit/1qR6CucQdsGqYnVvk70A?p=preview

HTML：

<div id="fixed" directive-when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items | limitTo: limit | filter: search">{{ i.Title }}</li>
  </ul>
</div>

<br>


<input ng-model="searchText">
<button ng-click="performSearch(searchText)">Submit</button>


<div>
  <strong>Result Search onClick</strong>
  <ul>
    <li ng-repeat="item in filtered">
      <p>{{ item.Title }}</p>
    </li>
  </ul>
</div>

JS：

app.controller('MainCtrl', function($scope, $filter) {  

$scope.limit = 5;

  var counter = 0;
  $scope.loadMore = function() {
    $scope.limit += 5;
  };

  $scope.loadMore();

  $scope.performSearch = function(searchText) {
        $scope.filtered = $filter('filter')($scope.items, $scope.search);
    }

    $scope.search = function (item){
        if (!$scope.searchText)
            return true;

        if (item.Title.indexOf($scope.searchText)!=-1 || item.Title.indexOf($scope.searchText)!=-1) {
                return true;
            }
            return false;
    };


});


app.directive("directiveWhenScrolled", function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
        scope.$apply(attr.directiveWhenScrolled);
      }
    });
  };
});

任何想法我如何使用单个 ng-repeat 机器人在 Click 上更新并且用户键入值？

Answer 1

这是您传递给过滤器的模型名称

是

<li ng-repeat="i in items | limitTo: limit | filter: search">{{ i.Title }}</li>

应该是

<li ng-repeat="i in items | limitTo: limit | filter: searchText">{{ i.Title }}</li>