我有一些折叠/扩展的div，使第一个div在加载时始终打开。在这里我需要保持打开的第一个div，也在更改给定的下拉菜单时，它可以工作，但是如果我展开任何人并更改下拉列表，扩展的div也会保持展开状态。我尝试使用 $scope.groups[0].isOpen = true;但它不起作用。任何人都可以帮我，这是下面的代码。
.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">
<div ng-controller="AccordionDemoCtrl">
<div class="scroll-div">
<div style="border:1px solid;" id="anchor{{group.id}}" ng-repeat="group in groups | orderBy:predicate:reverse track by $index">
<div class="parents" ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}
</div>
<ul class="childs" ng-show="($index == 0 && pristine) || group.isOpen">
<li ng-repeat="item in group.list ">
<span ng-bind-html="item"></span>
</li>
</ul>
</div>
</div>
<button type="button" ng-click="test()">Sort</button>
<select ng-model="x" ng-change="changeit()">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>
</body>
脚本.js
var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
$scope.oneAtATime = true;
$scope.pristine = true;
$scope.open = function (item) {
$scope.groups.filter(a=> a ===item).forEach(a=>{
a.isOpen = !a.isOpen;
});
$scope.closeOthers(item);
$scope.pristine = false;
}
$scope.closeOthers = function (item) {
$scope.groups.filter(a=> a !==item).forEach(a=>{
a.isOpen = false;
});
}
$scope.groups = [
{
title: 'title 1',
id:'1',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 2',
id:'2',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 3',
id:'3',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 4',
id:'4',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 5',
id:'6',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 6',
id:'5',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
}
];
$scope.test = function() {
$scope.groups.forEach(a => {a.isOpen = false;});
$scope.pristine = true;
$scope.predicate = 'id';
$scope.reverse = !$scope.reverse;
}
$scope.changeit = function() {
$scope.groups[0].isOpen = true;
}
});
这是一支工作笔，具有我认为您想要的行为：https://codepen.io/Lahikainen/pen/rPBVeO
下面是一些更改的代码：
编辑：为组添加了切换行为
<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">
<div ng-controller="AccordionDemoCtrl">
<div class="scroll-div">
<div
style="border:1px solid;"
id="anchor{{group.id}}"
ng-repeat="group in groups track by group.id">
<div class="parents" ng-click="toggleExpand(group)">
<i ng-class="{
'glyphicon-minus': isExpandedGroup(group),
'glyphicon-plus': !isExpandedGroup(group)}">
</i>
{{ group.title }}
</div>
<ul class="childs" ng-show="isExpandedGroup(group)">
<li ng-repeat="item in group.list ">
<span ng-bind-html="item"></span>
</li>
</ul>
</div>
</div>
<button type="button" ng-click="sort()">Sort</button>
<select ng-model="selectedGroup" ng-options="group.title for group in groups">
<option>{{ group.title }}</option>
</select>
</div>
</body>
控制器
var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
$scope.groups = [
{
title: 'title 1',
id:'1',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 2',
id:'2',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 3',
id:'3',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 4',
id:'4',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 5',
id:'6',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 6',
id:'5',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
}
];
$scope.selectedGroup = $scope.groups[0];
$scope.sortOrderMultiplier = 1;
$scope.isExpandedGroup = function (group) {
return group === $scope.selectedGroup;
}
$scope.toggleExpand = function (group) {
if ($scope.selectedGroup === group) {
$scope.selectedGroup = undefined;
} else {
$scope.selectedGroup = group;
}
}
$scope.sort = function () {
$scope.sortOrderMultiplier *= -1;
$scope.groups.sort(function (a, b) {
if (a.id > b.id) {
return 1 * $scope.sortOrderMultiplier;
}
if (a.id < b.id) {
return -1 * $scope.sortOrderMultiplier;
}
return 0;
})
}
});
如果有任何不清楚的地方，请随时提问。
编辑 添加我重构代码的原因的理由：
您的要求之一似乎是一次只能扩展一个组。出于这个原因，我向模型添加了一个selectedGroup，而不是向每个组添加一个isOpen属性。
当您只需要一个selectedGroup模型时，此代码会变得不必要地复杂： ng-show="($index == 0 && pristine) || group.isOpen"
您的open函数接收一个组作为其参数。然后筛选groups数组以查找对已引用的组的引用。然后设置 isOpen 属性。您需要做的就是item.isOpen = !item.isOpen; 这与您的closeOthers函数相同。