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

148

我发现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行中。我尝试了带引号和不带引号，但都没有用。我该怎么做呢？

— 队长堆栈
source

345

稍微更“ 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

— w
source

54

值得指出的是-并节省了别人几分钟的时间-如果您使用的是“跟踪依据”，则它必须排在过滤器之后。

— stephan.com 2015年

3

使用filter和limitTo时，是否可以获取可用项目的数量？我想使用limitTo但提供“更多加载”按钮来增加限制。仅在有更多记录可用时才显示。

— 蒂姆·布斯（TimBüthe）2015年

什么filter:query啊

— bigpony

根据OP的问题querySearch: <input ng-model="query">

— @defmx

45

派对晚了一点，但这对我有用。希望其他人发现它有用。

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

— 库奇
source

2

我怀疑如果它是一个大数组，这会比使用limitToFilter效率低，因为大概每个项目都必须进行评估

— rom99，2015年

3

我有一个场景，我想从更多的支持数组中显示6个项目。使用ng-if="$index < 6"允许我仅显示前6个，同时保持整个数组可搜索（我将过滤器与搜索字段组合在一起）。

— Jeroen Vannevel 2015年

这不是限制，这是隐藏在整个结果更个性化，然后3.如果

— fdrv表示

@ Jek-fdrv- ng-if在这种情况下，不会呈现$index大于的转发器的DOM元素3。如果$index在转发器中为0, 1, or 2，则条件为，true并且创建了DOM节点。ng-if与没有将ng-hide元素添加到DOM 的意义不同。

— couzzi '16

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)
  });
}

EDIT意外将手表放到了应该放在里面的控制器外面。

— Shaunhusain
source

2

这是将过滤器限制在html上的另一种方法，例如，我想一次显示3个列表，而不是我将使用limitTo：3

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

— 里三
source

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。

— 硬盘录像机
source

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）
source

-3

实现这一目标的另一种方法（我认为更好）是实际上拦截数据。limitTo可以，但是如果数组实际包含数千个时限制为10个怎么办？

致电我的服务时，我只是这样做：

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

这限制了发送给视图的内容，因此，与前端相比，在性能上要好得多。

— 马特·桑德斯（Matt Saunders）
source

limitTo的实现无论如何都使用array.slice（），数组大小的任何差异都应与您自己执行的性能相同。 github.com/angular/angular.js/blob/master/src/ng/filter/…– rom99

— 2015年

但limitTo实际上并没有限制发送到视图的数据，而这样做是可以的。我使用console.log（）进行了测试。

— 马特·桑德斯

1

是的，您正在做的是向视图公开一个新数组（我真的不会认为它在任何地方“发送”任何东西）。如果您只对数据中的前10个项目感兴趣，而在其他任何地方均未引用数据，则这样做可能会减少内存占用量（假设可以对垃圾进行数据收集）。但是，如果您仍然参考data周围，那么这比使用limitTo更有效。

— 2015年