单击如何使用AngularJS切换Limito值？

单击我的锚定链接时，我想切换列表值，默认情况下，列表值为5到500

默认情况下，我只想显示我的列表值5，单击我的链接“更多”我想显示所有其他列表项，现在更多的文本将更改为“更少”类型的手风琴，如果我们现在单击更少，我们只需要显示5个列表项

基本上如何在单击时切换“limito”的值？现在我有500点击它需要切换为5时，点击第二次，对诗句

<div ng-controller="listsCtrl">
        <div>
            <a ng-show="lists.length > 5" ng-click="listLimit=500">more</a>
        </div>

        <div>
            <ul ng-init="listLimit=5">
                <li ng-repeat="list in lists | limitTo:listLimit">test values</li>
            </ul>
         </div>
</div>

更多

测试值

我为你准备了一把小提琴，我认为你想要的就是它。关键是跟踪控制器内的

列表限制

，单击更多/更少文本时，列表限制会发生变化

提琴是

HTML:

这是项{$index}
{{totalItems==5？'more'：'less'}

js:

var module=angular.module（“MyModule”，[]）；
模块控制器（“MyController”，功能（$scope）{
//创建虚拟列表项
$scope.list=[]；
对于（var i=0；iThanks，有用的解决方案）。
<div ng-app="MyModule" ng-controller="MyController">  
    <div ng-repeat="item in list | limitTo:totalItems">
        This is item {{$index}}           
    </div>
    <div ng-click="more()">{{totalItems === 5 ? 'more' : 'less'}}</div>
</div>

var module = angular.module("MyModule", []);
module.controller("MyController", function($scope) {
    // create the dummy list items
    $scope.list = [];
    for(var i=0; i<100; i++){
        $scope.list.push({
            value: i
        });
    }

    // set the initial item length
    $scope.totalItems = 5;

    // more/less clicked on
    $scope.more = function(){
        if($scope.totalItems === 5){
            $scope.totalItems = $scope.list.length;
        }else{
            $scope.totalItems = 5;
        }       
    };  
});