Question

我是angularjs的新手，我有25行显示，但是第一次加载我试图只显示一行，会有一个展开按钮显示剩余的行，然后点击展开我要显示所有的行。这是代码。

    <table>
      <tbody>
         <tr ng-repeat="x in names">
          <td>{{x}}</td>
         </tr>
      </tbody>
   </table>

Answer 1

您可以使用：

<div ng-repeat="x in names | limitTo: limit">
    <p>{{x}}</p>
</div>

$ scope.limit = 1;

并且在ng-click上你可以设置你的限制，如：ng-click ='limit = names.length'

Answer 2

这是你可以尝试的。

<div ng-init="limit= 1">
    <button ng-click="limit=names.length">View</button>
    <table>
        <tbody>
           <tr ng-repeat="x in names | limitTo: limit">
                <td>{{x}}</td>
           </tr>
        </tbody>
    </table>
</div>

https://jsfiddle.net/alpeshprajapati/7MhLd/2252/

Answer 3

尝试limitTo过滤器：

limitTo过滤器返回一个数组或仅包含指定数量元素的字符串。

语法：

{{ object | limitTo : limit }}

根据要求：

Js：

var app = angular.module('myApp', []);
app.controller('MyCtrl',function($scope) {
    $scope.elements = ["1", "2", "3", "4", "5"];
  $scope.limit = 1;
});

Html：

<button ng-click="limit=elements.length">Expand More</button>
<table>
  <tr ng-repeat="item in elements | limitTo: limit">
     <td>{{item}}</td>
  </tr>
</table>

工作小提琴： https://jsfiddle.net/rohitjindal/vcxvvecr/2/

Answer 4

// Angular `slice` filter for arrays

var app = angular.module('myApp', []);

app.filter('slice', function() {
  return function(arr, start, end) {
    return arr.slice(start, end);
  };
});

app.controller('MainController', function($scope) {
$scope.offset = 1;
  $scope.items = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]; 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='MainController' ng-init="start = 0;">
   
    <ul>
      <li ng-repeat="item in items | slice:start:offset">{{item}}</li>
    </ul>
    <button ng-click="offset = items.length">Expand</button>
  </div>
  
</div>

我使用切片进行限制设置

你也可以尝试： limitTo :(限制）:(开始）

你可以说ng-repeat =“list in list | limitTo：50：0”

Answer 5

通过在控制器中设置范围变量并在ng-repeat中过滤它来限制行。

脚本：

var app = angular.module('myApp', []);
app.controller('limitCtrl',function($scope) {    
  $scope.limitNumber = 1;
});

Html：

<table>
      <tbody>
         <tr ng-repeat="x in names | limitTo: limitNumber">
          <td>{{x}}</td>
         </tr>
      </tbody>
   </table>

如何在角度数据表中只显示一行？

5 个答案: