以下是一个使用AngularJS和ng-repeat的可展开/折叠div的示例代码:
HTML代码:
{{item.title}}
{{item.content}}
JavaScript代码:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [
{ title: 'Item 1', content: 'Content 1', expanded: false },
{ title: 'Item 2', content: 'Content 2', expanded: false },
{ title: 'Item 3', content: 'Content 3', expanded: false }
];
$scope.toggleItem = function(item) {
item.expanded = !item.expanded;
};
});
CSS代码:
.header {
cursor: pointer;
background-color: lightgray;
padding: 10px;
}
.content {
padding: 10px;
}
在这个示例中,ng-repeat指令用于遍历items数组并为每个item创建一个div。header部分用于显示项目的标题,并在点击时调用toggleItem函数来切换item的展开/折叠状态。content部分用于显示项目的内容,并使用ng-show指令根据item的expanded属性来控制其显示与隐藏。
当点击header时,toggleItem函数会将item的expanded属性取反,从而实现展开/折叠效果。
注意:为了使上述代码能正常工作,你需要在页面中引入AngularJS库。