以下是一个示例代码,展示如何使用Angular指令来实现显示更多/显示更少的功能:
HTML模板:
{{ item }}
Angular控制器:
angular.module('myApp', []).controller('myController', function($scope) {
$scope.items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
'Item 6',
'Item 7',
'Item 8',
'Item 9',
'Item 10'
];
$scope.defaultLimit = 5; // 默认显示的项数
$scope.isExpanded = false; // 是否展开全部项
$scope.toggleExpand = function() {
$scope.isExpanded = !$scope.isExpanded;
};
});
在上面的示例中,我们使用了ng-repeat指令来遍历items数组,并使用ng-show指令来根据isExpanded变量的值来决定显示或隐藏每个项。我们还使用了ng-click指令来绑定toggleExpand函数,以实现切换显示更多/显示更少的功能。
初始化时,默认显示的项数是5个。点击“显示更多”按钮后,isExpanded变量的值将被切换为true,所有项都将被显示。再次点击按钮,isExpanded变量的值将被切换为false,只有默认的5个项将被显示。