控制重复结构外的ngRepeat限制

时间:2014-12-10 11:04:14

标签: angularjs

如何控制ngRepeat结构之外的repeat限制?

我试着像下面的代码一样,但没有成功。

<my-directive-body ng-init="limit = 2">
   <my-directive-actions-group-items>
      <my-directive-actions-items icon="fa-birthday-cake">Today Birthday</my-directive-actions-items>
   </my-directive-actions-group-items>

   <!-- Here I have a repeat -->
   <my-directive-actions-group-items ng-repeat="item in researchs | limitTo: limit">
      <my-directive-actions-items icon="fa-user">{{item.nome}}</my-directive-actions-items>
      <my-directive-actions-items icon="fa-edit"></my-directive-actions-items>
      <my-directive-actions-items icon="fa-trash-o"></my-directive-actions-items>
   </my-directive-actions-group-items>
   <!-- End of Repeat -->   

   <!-- Here I want control the ngRepeat limit -->   
   <my-directive-ctions-group-items>
      <span ng-click="limit = researchs.length">More...</span>
   </my-directive-actions-group-items>
</my-directive-actions-body>

图片示例

enter image description here

1 个答案:

答案 0 :(得分:0)

这就是我得到的方式

查看

<my-directive-body>
   <my-directive-actions-group-items>
      <my-directive-actions-items icon="fa-birthday-cake">Today Birthday</my-directive-actions-items>
   </my-directive-actions-group-items>

   <!-- Here I have a repeat -->
   <my-directive-actions-group-items ng-repeat="item in researchs | limitTo: limit">
      <my-directive-actions-items icon="fa-user">{{item.nome}}</my-directive-actions-items>
      <my-directive-actions-items icon="fa-edit"></my-directive-actions-items>
      <my-directive-actions-items icon="fa-trash-o"></my-directive-actions-items>
   </my-directive-actions-group-items>
   <!-- End of Repeat -->   

   <!-- Here I want control the ngRepeat limit -->   
   <my-directive-ctions-group-items>
      <span ng-click="getAllSearchs()">More...</span>
   </my-directive-actions-group-items>
</my-directive-actions-body>

<强>控制器

$scope.limit = 2;
$scope.getAllSearch = function () {
   $scope.limit == $scope.researchs.length ? $scope.limit = 2 : $scope.limit = $scope.researchs.length;            
}