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

IT技术 javascript model-view-controller angularjs scope
2021-03-21 18:27:06

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

6个回答

稍微更“角度的方式”是使用简单的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

值得指出 - 并为其他人节省几分钟 - 如果您使用“跟踪”，它必须是过滤器之后的最后一个。
2021-04-21 18:27:06
@defmx 根据 OP 的问题，query来自Search: <input ng-model="query">
2021-04-21 18:27:06
什么是filter:query？
2021-04-25 18:27:06
有没有办法在使用 filter 和 limitTo 时获取可用项目的数量？我想使用limitTo但提供一个“加载更多”按钮来增加限制。仅当有更多记录可用时才应显示。
2021-04-26 18:27:06

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

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>
这不是限制，如果计数超过 3，则隐藏整个结果。
2021-04-20 18:27:06
我有一个场景，我想从更多的支持数组中显示 6 个项目。使用ng-if="$index < 6"允许我只显示前 6 个，同时保持整个数组可搜索（我有一个过滤器和一个搜索字段）。
2021-04-27 18:27:06
我怀疑如果它是一个大数组，这会比使用 limitToFilter 效率低，因为大概必须评估每个项目
2021-05-11 18:27:06
@Jek-fdrv - 不，ng-if在这种情况下，不会呈现$index大于的转发器的 DOM 元素3。如果$index在转发器中为0, 1, or 2，则条件为true并且创建 DOM 节点。ng-if不同于ng-hide元素没有添加到 DOM 的意义。
2021-05-11 18:27:06

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

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

最初存储您的所有数据

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

编辑不小心把手表放在控制器外面，它应该放在里面。

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

.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你想要什么。

其它你可能感兴趣的问题
上一篇jQuery 动画数字计数器从零到值 下一篇如何在 WebStorm 中对抗大量未解决的变量警告？