我有一个用 angularjs 创建的可折叠 div，在这里我可以借助 script.js 中的 json 数组保持打开可折叠 div 的第一部分，但我想以其他方式打开它，而不是从json。这是下面的代码 https://plnkr.co/edit/nCdGzZYPSTYsMPYf8K9o?p=preview
HTML
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script src="script.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
<body ng-app="app">
<h1>Dynamic accordion: nested lists with html markup</h1>
<div ng-controller="AccordionDemoCtrl">
<div>
<div ng-repeat="group in groups track by $index">
<div class="parents" ng-click="open($index)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}
</div>
{{ group.content }}
<ul class="childs" ng-show="group.isOpen">
<li ng-repeat="item in group.list">
<span ng-bind-html="item"></span>
</li>
</ul>
</div>
</div>
</div>
</body>
脚本
angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
angular.module('app').controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.open = function (index) {
$scope.groups[index].isOpen = !$scope.groups[index].isOpen;
$scope.closeOthers(index);
}
$scope.closeOthers = function (index) {
for(var i = 0; i < $scope.groups.length; i++) {
if (i !== index)
$scope.groups[i].isOpen = false;
}
}
$scope.groups = [
{
title: 'title 1',
isOpen: true,
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a']
},
{
title: 'title 2',
list: ['item1b',
'<b>item2b </b> blah ',
'item3b']
},
{
title: 'title 3',
},
{
title: 'title 4',
},
{
title: 'title 5',
}
];
});
最佳答案
你可以使用angular.forEach并尝试这个:
JS:
$scope.groups[0].expanded = true;
$scope.expanded = function(select) {
var boolexpansion = !select.expanded;
angular.forEach($scope.groups, function(n) {
n.expanded = false;
});
if(boolexpansion) {
select.expanded = !select.expanded;
}
}
HTML:
<div ng-repeat-start="group in groups track by $index">
<button ng-if="!group.expanded" ng-click="expanded(group);">+</button>
<button ng-if="group.expanded" ng-click="expanded(group);">-</button>
{{ group.title }}
</div>
<div ng-if="group.expanded" ng-repeat-end="" >
{{group.content}}
</div>
</div>
关于html - 如何在 angularjs 中保持可折叠 div 的第一部分打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54044551/