使用ngRepeat时限制显示结果的数量

一尘不染

使用ngRepeat时限制显示结果的数量

angularjs

我发现AngularJS教程很难理解。这一步引导我逐步构建一个可显示手机的应用程序。我处于第5步，我想作为一个实验，尝试让用户指定他们希望显示多少。该视图如下所示：

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        How Many: <input ng-model="quantity">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="span10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>
</body>

我添加了以下行，用户可以在其中输入他们想要显示多少个结果：

How Many: <input ng-model="quantity">

这是我的控制器：

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 'quantity');
  });

  $scope.orderProp = 'age';
  $scope.quantity = 5;
}

重要的一行是：

$scope.phones = data.splice(0, 'quantity');

我可以用硬编码来表示应该显示多少部电话。如果输入5，将显示5。我要做的就是从视图中读取该输入中的数字，并将其放在data.splice行中。我尝试了带引号和不带引号，但都没有用。我该怎么做呢？

阅读 260

2020-07-04

共1个答案

一尘不染

稍微更“ Angular的方式”将是使用limitToAngular原生提供的简单过滤器：

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp | limitTo:quantity">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>



app.controller('PhoneListCtrl', function($scope, $http) {
    $http.get('phones.json').then(
      function(phones){
        $scope.phones = phones.data;
      }
    );
    $scope.orderProp = 'age';
    $scope.quantity = 5;
  }
);

[**PLUNKER**](http://plnkr.co/edit/7pYWjCqBufRkxKEk23ev?p=preview)

2020-07-04