angularjs와 함께 readmore 버튼을 만듭니다

Question

저는 많은 행을 가진 JSON 객체가 있습니다.이 객체에 점점 더 많은 것을 추가하고 싶습니다. (클릭하면 주 json에서 2 행을 더 추가 할 수 있습니다).

나는 모든 사용자가 ng-repeat="user in users" 인 곳에서 개체, 포함, 기본 JSON (모든 행 포함) 및 범위 $scope.users을 가지고 있습니다.

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

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

어떻게가? 난 단지 2 행 (즉 객체 response 출신으로 $scope.users을 시작 당신은 limitTo 필터는 아래의 예를 참조하십시오 사용할 수 있습니다

Answer 1

감사 할

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>