首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用ngRepeat时限制显示结果的数量

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

Stack Overflow用户
提问于 2013-07-15 04:18:33
回答 4查看 195.9K关注 0票数 151

我发现AngularJS tutorials很难理解;这个应用程序正在引导我构建一个显示手机的应用程序。我在step 5上,我想作为一个实验,我会尝试允许用户指定他们想要显示的数量。视图如下所示:

代码语言:javascript
复制
<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>

我添加了这一行,用户可以在这里输入他们想要显示的结果数量:

代码语言:javascript
复制
How Many: <input ng-model="quantity">

这是我的控制器:

代码语言:javascript
复制
function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 'quantity');
  });

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

重要的一点是:

代码语言:javascript
复制
$scope.phones = data.splice(0, 'quantity');

我可以硬编码一个数字来表示应该显示多少个电话。如果我把5放进去,会显示5。我所要做的就是读取视图输入中的数字,并将其放入data.splice行。我试过带引号和不带引号,但都不管用。我该怎么做呢?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17643361

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档