我有一些来自ng repeat的div。第一个div总是在加载时打开/扩展。在这里单击一个按钮，我根据json中的id对div进行排序。一切正常，但是当我排序时，我的顶级div也应该扩展而其他div应该关闭。任何人都可以帮助我。这是下面的代码
<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">
<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="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>
</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.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.predicate = 'id';
$scope.reverse=true;
}
$scope.groups[0].isOpen = true;
});
答案 0 :(得分：0)
要获得预期结果，请使用以下选项
使用findIndex数组方法对项目进行排序后，获取最顶部对象的索引
let index = $ scope.groups.findIndex（v => v.id == $ scope.groups.length）; $ scope.groups [index] .isOpen = true;
codepen-https://codepen.io/nagasai/pen/zyQJYx
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.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[0].isOpen = false;
$scope.predicate = "id";
$scope.reverse = true;
let index = $scope.groups
.map(function(x) {
return x.id;
})
.indexOf($scope.groups.filter(v => v.id == $scope.groups.length)[0].id);
$scope.groups[index].isOpen = true;
};
$scope.groups[0].isOpen = true;
});<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">
<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="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>
</div>
</body>
答案 1 :(得分：0)
尝试使用track by $index和ng-show="$index == 0"。
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: '5',
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a',
'item4a',
'item5a',
'item6a',
'item7a'
]
},
{
title: 'title 6',
id: '6',
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.groups[0].isOpen = true;
});<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>
</div>
</body>