如何在显示数据部分时使用limitTo

时间:2015-11-17 17:09:48

标签: angularjs

我正在根据日期显示项目,想要限制项目数量。

HTML

<div ng-repeat="itemDate in itemDates = (itemsList()  | unique:'Date' | orderBy:'sortingOrder') | limitTo:displayNum ">

    <div>{{itemDate.Date}}</div>   
    <div ng-repeat="item in itemsList()| orderBy:'sortingOrder' | orderBy: 'Time'">
        <div ng-show="itemDate.Date === item.Date">
            <div>{{item.name}},{{item.Date}}</div>
        </div>
    </div>         
    <div>
        <button ng-click="increaseBy(1)"> More </button>
    </div>     
</div>

Controller.js

$scope.displayNum = 1;
$scope.itemsList = function () {
    return itemService.getItemsList();
};
$scope.increaseBy = function(num) {
    $scope.displayNum += num;
};

当前输出:

Today
item1, date
More
Yesterday
item2,date
More

每个部分都显示更多按钮。我想在列表的末尾显示更多按钮,如下所示,它应该在显示所有项目时隐藏。

Today
item1, date
Yesterday
item1, date
More

0 个答案:

没有答案