用angularjs創建readmore按鈕

Question

我有一個包含許多行的JSON對象，我想將越來越多的這些對象添加到作用域中（讓我們說每次單擊都會從主要json添加2行）。

我有respone對象，包括，主要JSON（包含所有行）和范圍$scope.users從中可以獲取所有ng-repeat="user in users" 。

<button ng-click="readMore()">Read More</button>

$scope.readMore = function() {
    /* HOW CAN I ADD HERE INTO `$scope.users` to have 2 more rows ? */
};

以及如何僅以兩行（來自對象response來啟動$scope.users ？

謝謝

Answer 1

您可以使用limitTo過濾，請參見下面的示例

 var app = angular.module('app', []); app.controller('fCtrl', function($scope) { $scope.limit = 2; $scope.max = false; $scope.readMore = function() { if ($scope.limit < $scope.rows.length) { $scope.limit =$scope.limit + 2; if ($scope.limit >= $scope.rows.length) { $scope.max = true; } } else { $scope.max = true; } }; $scope.rows = [ { rowid: 1, text: "Contrary to popular belief, Lorem Ipsum is not simply random text. " }, { rowid: 2, text: "Contrary to popular belief, Lorem Ipsum is not simply random text. " }, { rowid: 3, text: "Contrary to popular belief, Lorem Ipsum is not simply random text. " }, { rowid: 4, text: "Contrary to popular belief, Lorem Ipsum is not simply random text. " }, { rowid: 5, text: "Contrary to popular belief, Lorem Ipsum is not simply random text. " }, { rowid: 6, text: "Contrary to popular belief, Lorem Ipsum is not simply random text. " } ] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="fCtrl"> <p ng-repeat="item in rows | limitTo: limit">{{item.rowid}}). {{item.text}}</p> <button ng-click="readMore()" ><span ng-if="!max">Read More</span><span ng-if="max">End</span></button> </div> </div>