Question

点击我的锚链接后，我想切换列表值，默认情况下启动为5到500.

默认情况下，我希望仅显示我的列表值5，点击我的链接＆＃34;更多＆＃34;我想显示所有其他列表项，现在更多的文本将更改为＆＃34; less＆＃34;有点手风琴，如果我们点击现在少了，我们只需要显示5个列表项。

基本上如何切换＆＃34; limitTo＆＃34;的值。点击？现在我有500点击点击它需要在第二次点击时切换为5，vs vse ...

<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>

Answer 1

我为你做了一个小提琴，做了我认为你所追求的事。关键是跟踪控制器内的listLimit，当点击更多/更少文本时，控制器会发生变化。

小提琴是here

HTML：

<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>

JS：

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;
        }       
    };  
});

onclick如何使用AngularJS切换limitTo值？

1 个答案: