我有一些来自ng repeat的div，也有一些来自ng repeat的菜单。在页面加载中，除第一个div以外，我的div都折叠了。这里的问题是单击任何菜单后所有div都保持打开状态。实际上只有特定的滚动div应该打开，其他的应该关闭。任何人都可以帮帮我，我是angularjs的新手。这是下面的代码，并且在plunker中也进行了更新。 https://plnkr.co/edit/MRZgVHYMWsff022Mq3dV?p=preview
<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="js/index.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
<style type="text/css">
.scroll-div {
height: 100px;
overflow: scroll;
margin-top: 10px;
}
.anchor {
border: 2px dashed red;
padding: 10px 10px 200px 10px;
}
.my-fixed-header {
}
.my-fixed-header > a {
display: inline-block;
margin: 5px 15px;
}
</style>
<body ng-app="app">
<div ng-controller="AccordionDemoCtrl">
<div class="my-fixed-header">
<a href="index.html#/#anchor{{x}}" href="" ng-click="gotoDiv(x)" ng-repeat="x in [1,2,3,4,5]">
Go to Div {{x}}
</a>
</div>
<input type="text" ng-model="item.value" ng-change="onTextChange()">
<div class="scroll-div">
<div style="border:1px solid;" id="anchor{{group.id}}" ng-repeat="group in groups | filter:item.value ">
<div class="parents" ng-click="open(group)"><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>
var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
$scope.oneAtATime = true;
$scope.open = function (item) {
$scope.groups.filter(a=> a ===item).forEach(a=>{
a.isOpen = !a.isOpen;
});
$scope.closeOthers(item);
}
$scope.onTextChange = function(item) {
if($scope.item.value){
$scope.groups.forEach(a=>{
a.isOpen = true;
});
}
else{
$scope.groups.forEach(a=>{
a.isOpen = false;
});
$scope.groups[0].isOpen = true;
}
};
$scope.closeOthers = function (item) {
$scope.groups.filter(a=> a !==item).forEach(a=>{
a.isOpen = false;
});
}
$scope.gotoDiv = function(x) {
$scope.groups.forEach(a=>{
a.isOpen = true;
});
};
$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: ['item1b',
'<b>item2b </b> blah ',
'item3b']
},
{
title: 'title 3',
id:'3',
list: ['item1c',
'<b>item2c </b> blah ',
'sss3c']
},
{
title: 'title 4',
id:'4',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 5',
id:'5',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
}
];
$scope.groups[0].isOpen = true;
});
答案 0 :(得分：0)
我已经解决了这个问题，并更新了https://plnkr.co/edit/MRZgVHYMWsff022Mq3dV?p=preview插件。
<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'>
<style type="text/css">
.scroll-div {
height: 100px;
overflow: scroll;
margin-top: 10px;
}
.anchor {
border: 2px dashed red;
padding: 10px 10px 200px 10px;
}
.my-fixed-header {
}
.my-fixed-header > a {
display: inline-block;
margin: 5px 15px;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="my-fixed-header">
<a ng-repeat="y in players" href="index.html#{{y.technology}}" ng-click="gotoDiv(y)" >
Go to Div {{y.technology}}
</a>
</div>
<select class="change" ng-model="x" ng-change="update()">
<option value="technology"><p>view by</p>-<p>technology</p></option>
<option value="vertical">vertical</option>
</select>
<div><button>Sort-ascending alphabetical order</button></div>
<div><button>Sort-descending alphabetical order</button></div>
<div class="scroll-div">
<div style="border:1px solid;" ng-repeat="(key, value) in players | groupBy: attr" ng-attr-id="{{key}}">
<h4>Group name: {{ key }}{{value.length}}</h4>
<div ng-repeat="group in value">
<div class="parents" ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> Title
</div>
<div ng-attr-id="{{key}}" class="childs" ng-show="group.isOpen" style="height:70px;">
player: {{ group.name }}
</div>
</div>
</div>
</div>
</div>
var app = angular.module("myApp", ['angular.filter']);
app.controller("myCtrl", function($scope) {
$scope.oneAtATime = true;
$scope.players = [
{
name: 'projectjava',
symptom:'fever',
technology:'java',
vertical:'insurance',
id:'1'
},
{
name: 'projecttabulue',
symptom:'diesease',
technology:'tabulue',
vertical:'Banking',
id:'2'
},
{
name: 'projectpython1',
symptom:'diesease',
technology:'python',
vertical:'Health care',
id:'3'
},
{
name: 'projectpython2',
symptom:'colds',
technology:'python',
vertical:'Banking',
id:'4'
}
];
$scope.players[0].isOpen = true;
$scope.update = function() {
if($scope.x == 'technology'){
$scope.id='technology';
$scope.attr = 'technology';
}
if($scope.x == 'vertical'){
$scope.id='vertical';
$scope.attr = 'vertical';
}
}
$scope.open = function (item) {
$scope.players.filter(a=> a ===item).forEach(a=>{
a.isOpen = !a.isOpen;
});
$scope.closeOthers(item);
}
$scope.gotoDiv = function(y) {
$scope.players.forEach(a=>{
console.log(a.technology);
if($scope.x == 'technology'){
if (a.technology === y.technology.toString()) {
a.isOpen = true;
}
else{
a.isOpen = false;
}
}
});
};
$scope.closeOthers = function (item) {
$scope.players.filter(a=> a !==item).forEach(a=>{
a.isOpen = false;
});
}
});