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

Question

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

javascriptmodel-view-controllerangularjsscope

151

我觉得很难理解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行中。我尝试过带引号和不带引号，都没有成功。我该怎么办？

- Captain Stack

7个回答

47

可能我来晚了，但这对我有用。希望其他人也会发现它的用处。

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>

- couzzi

2

如果数组很大，我怀疑这种方法比使用limitToFilter要低效，因为每个项目都需要被评估。 - rom99

3

我曾经有这样一种情况，我想从一个很大的后台数组中展示6个项目。使用ng-if="$index < 6"可以让我只显示前6个项目，同时保持整个数组可搜索（我使用了过滤器和搜索字段）。 - Jeroen Vannevel

不是限制，而是如果计数超过3，则隐藏整个结果。 - fdrv

@Jek-fdrv - 在这种情况下，ng-if不会渲染重复器中$index大于3的DOM元素。如果重复器中的$index是0、1或2，则条件为true，DOM节点被创建。ng-if与ng-hide的区别在于，元素不会添加到DOM中。 - couzzi

3

这里有另一种在 HTML 中限制筛选器的方法，例如我想一次显示 3 个列表，那么我会使用 limitTo:3

  <li ng-repeat="phone in phones | limitTo:3">
    <p>Phone Name: {{phone.name}}</p>
  </li>

- Rizwan

2

首先要存储所有数据

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

  $scope.orderProp = 'age';
  $scope.howMany = 5;
  //then here watch the howMany variable on the scope and update the phones array accordingly
  $scope.$watch("howMany", function(newValue, oldValue){
    $scope.phones = $scope.allPhones.splice(0,newValue)
  });
}

编辑错误地将手表放在控制器外面，实际上它应该放在里面。

- shaunhusain

1

在我的情况下，如果您有对象或多维数组，则此方法效果更佳。它仅显示第一个项目，其他项目在循环中将被忽略。

.filter('limitItems', function () {
  return function (items) {
    var result = {}, i = 1;
    angular.forEach(items, function(value, key) {
      if (i < 5) {
        result[key] = value;
      }
      i = i + 1;
    });
    return result;
  };
});

将5更改为您想要的内容。

- fdrv

0

使用limitTo过滤器在ng-repeat中显示有限数量的结果。

<ul class="phones">
      <li ng-repeat="phone in phones | limitTo:5">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
</ul>

- Rajkiran Shetty

-2

另一种（我认为更好的）实现方式是实际拦截数据。limitTo 是可以的，但如果你要限制到 10，而实际数组中包含数千个元素呢？

当调用我的服务时，我只需要这样做：

TaskService.getTasks(function(data){
    $scope.tasks = data.slice(0,10);
});

这会限制发送到视图的内容，所以与在前端执行相比，性能应该更好。

- Matt Saunders

实现limitTo的方式仍然使用array.slice()，因此数组大小的任何差异都应该与自己执行相同的性能差异。 https://github.com/angular/angular.js/blob/master/src/ng/filter/limitTo.js - rom99

但是limitTo并没有真正限制发送到视图的数据，而使用这种方式可以实现。我使用console.log()进行了测试。 - Matt Saunders

1

是的，你正在将一个新数组暴露给视图（我不会真的认为它是在任何地方“发送”）。如果你只对数据中的前10个项目感兴趣，并且数据没有在其他地方引用，那么这样做可能会减少内存占用（假设数据可以进行垃圾回收）。但是，如果你仍然保留对data的引用，那么这种方法就不比使用limitTo更有效率了。 - rom99

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stewie · Accepted Answer

更符合"Angular方式"的做法是使用直观的limitTo过滤器，这是Angular原生提供的：

<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