我如何获得ng-repeat中的项目总数

时间:2014-09-20 20:19:11

标签: angularjs angularjs-ng-repeat

我试图获取每次迭代中的项目总数。我的代码就是这个

    <ul class="phones">
       <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"  
        ng-init="index()"     class="thumbnail">
         <a href="#/phones/{{phone.id}}" class="thumb">
           <img ng-src="{{phone.imageUrl}}">
         </a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
         <p>{{phone.snippet}}</p>
       </li>
    </ul>
    <div>
   {{ total }}
</div>

控制器

phonecatApp.controller('PhoneListCtrl', function($scope, $http)
{
$scope.total =0;
$scope.index =function()
{
    $scope.total ++;
}
}

2 个答案:

答案 0 :(得分:3)

动态是指应用过滤器后当前显示的手机总数。

<ul class="phones">
   <li ng-repeat="phone in filtered = (phones | filter:query | orderBy:orderProp)"  
    ng-init="index()"     class="thumbnail">
     <a href="#/phones/{{phone.id}}" class="thumb">
       <img ng-src="{{phone.imageUrl}}">
     </a>
      <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
     <p>{{phone.snippet}}</p>
   </li>
</ul>
<div>
{{ filtered.length }}
</div>

更有意义的数据(Bonus Tip :))

<div ng-show="query">
  <ng-pluralize count="filtered.length" when="{'0': ' No search result ', 'one': ' 1 search result ', 'other': ' {} search results '}"></ng-pluralize> for {{query}}
 </div>

答案 1 :(得分:1)

您是否想要获得手机总数? 您只需在表达式中使用length属性,而不是{{ total }}

{{ phones.length }}