需求是在嵌套的列表中，实现对应列表点击的，显示隐藏。
单个很好写like this：
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='angular.min.js'></script>
</head>
<body>
<div ng-controller="ListCtrl" >
<button ng-click='changeState()'>
click me
</button>
<div ng-show='toshow'>you want to show/hide content</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('ListCtrl', ['$scope', function($scope) {
$scope.toshow = false;
$scope.changeState = function(){
$scope.toshow = ! $scope.toshow;
}
}]);
</script>
</body>
</html>
显示效果如下：
嵌套的列表如下：
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='angular.min.js'></script>
</head>
<body>
<ul ng-controller="ListCtrl" >
<li class="sub{{$index}}" ng-repeat="msg in items" ng-init='parent = $index'>
{{ msg.name }}
<div ng-repeat=' item in msg' ng-init='child = $index'>
<button ng-click="remove(parent,child)" ng-show='sub == parent && sup == child'>you want other click show this{{$index}}</button>
<div ng-show='sub != parent || sup != child'>
{{$index}};
<button ng-click="remove(parent,child)" >you want first show{{$index}}</button>
</div>
</div>
</li>
</ul>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('ListCtrl', ['$scope', function($scope) {
$scope.items = [
{id:215,name:'柚数据简介'},{id:84,name:'大数据'},{id:201,name:'数据可视化'},
{id:189,name:'集群'},{id:191,name:'运算框架'},{id:202,name:'费用预充值'},
{id:208,name:'用户账户'},{id:212,name:'工单'}
]
$scope.sub = 'none'; //随意写个不是数字的就可以
$scope.sup = 'none';
$scope.remove = function(par,chl) {
$scope.sub = par; //保持与parent/child相等就显示
$scope.sup = chl;
};
}]);
</script>
</body>
</html>
达到效果如下：(点击实现显示)
这个还是比较局限只能保持单一的显示，并且不能隐藏；
需要可以借鉴，有更好的方法请欢迎留言指正（博客园---嗨海）。