Question

我是一个巨大的AngularJS n00b，甚至发现tutorials很难理解。本教程将引导我构建一个显示电话的应用程序。我正在step 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行中。我试过有没有引号，也没有工作。我该怎么做？

Answer 1

稍微多一点“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

Answer 2

派对有点晚了，但这对我有用。希望其他人觉得它很有用。

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

Answer 3

最初存储您的所有数据

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

编辑意外地将手表放在控制器外面。

Answer 4

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

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

Answer 5

如果您有对象或多维数组，这在我的情况下效果更好。它只会显示第一项，其他只会在循环中被忽略。

.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。

Answer 6

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

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

Answer 7

另一种（我认为更好）实现此目的的方法是实际拦截数据。 limitTo没关系，但是当你的数组实际上包含数千个时，你会限制为10？

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

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

这限制了发送到视图的内容，因此在性能上要比在前端执行此操作要好得多。

ngRepeat - 限制显示结果的数量

7 个答案: