AngularJS-limitTo和过滤器

Question

我正在尝试结合使用angular的limitTo和filter，但是它似乎无法正常工作。 我希望能够在搜索框中输入一个值，然后按搜索。 之后，我想通过在过滤器框中输入数字来限制显示的结果，然后按应用过滤器。 但是，当我在此处输入数字时，它不会清除结果，而是清除所有结果。 有什么建议么？ 例如，尝试搜索simon。 然后，在顶部框中输入2，然后单击“应用过滤器”，看看会发生什么。

柱塞：

https://plnkr.co/edit/Y522GAdShVhseAKNWouK?p=preview

angular.module('userApp', []).controller('myCtrl', function($scope) {

  var vm = this;

   $scope.users = [
    {'username':'david', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'michael', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'ben', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'simon', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'allen', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'crystal', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'meth', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'bryan', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'simon', 'email':'something@gmail.com', 'name':'Some Name'},
    {'username':'simon', 'email':'something@gmail.com', 'name':'Some Name'}
    ];

    vm.showAll = function() {
      $scope.limit = undefined;
    };

    vm.showMore = function(display) {
      $scope.limit = display;
    };

    vm.search = function(searchBar) {
      $scope.searchKeyword = searchBar;
    };

});

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="userApp" ng-controller="myCtrl as main">
    <h1>Hello Plunker!</h1>

  <input type="text" ng-model="display">
      <button type="button" ng-click="main.showMore(display);">Apply Filter</button> 
    <button type="button" ng-click="main.showAll();">Show All</button> 
    <br>
    <br>
      <input type="text" ng-model="searchBar" place="enter search keyword">
      <button ng-click="main.search(searchBar);" type="button">Search</button>



    <table>
      <tr>
        <th>Username</th>
        <th>Email</th>
        <th>Name</th>
      </tr>
      <tr ng-repeat="person in users | limitTo: limit | filter: searchKeyword">
        <td>{{ person.username }}</td>
        <td>{{ person.email }}</td>
        <td>{{ person.name }}</td>
      </tr>
    </table>
  </body>

</html>

Answer 1

您应该将它们转过来，因为它首先受到限制，然后再进行过滤。 因此，将您的html更改为：

<tr ng-repeat="person in users | filter: searchKeyword | limitTo: limit">

AngularJS-limitTo和过滤器

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-01 17:19:19

AngularJS-limitTo和过滤器

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-01 17:19:19

解决方案1
1 已采纳 2017-01-01 17:19:19