大佬教程收集整理的这篇文章主要介绍了angularjs – 使用ng-show在点击中扩展嵌套列表，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我用ng-repeat来渲染我的嵌套列表.
该列表以始终显示的文件夹的方式构建
以及单击父文件夹时显示的文件.
问题是当我使用ng-show来显示所有文件夹都打开的文件
而不是点击的.
例如
我只希望列表中点击的记录被扩展,而不是所有的记录.
我明白为什么会发生,我正在寻找一个方法来解决这个问题.
我该如何实现呢？
我的代码
var webApp = angular.module('webApp',[]);
//controllers
webApp.controller ('VotesCtrl',function ($scope,Votes) {
$scope.Votes = Votes;
$scope.show = false;
$scope.expand = function() {
console.log("show")
$scope.show = true;
}
});
//services
webApp.factory('Votes',[function() {
//temporary repository till integration with DB this will be translated into restful get query
var Votes = [
{
id: '1',created: 1381583344653,updated: '222212',ratingID: '4',rate: 5,ip: '198.168.0.0',status: 'Approved',folder:[
{
id: '1',},{
id: '111',status: 'Approved'
}
]
},{
id: '2',created: 1382387322693,ratingID: '3',rate: 1,ip: '198.168.0.1',folder:[
{
id: '2',{
id: '22',status: 'Approved'
},{
id: '222',created: 1382387327693,]
},{
file:[
{
id: '231',created: 1392387327693,ratingID: '1',ip: '198.168.2.1',status: 'Approved'
}
]
}
];
return Votes;
}]);
HTML
<div>
<ul>
<li class="created">
<b>CREATED</b>
</li>
<li class="ip">
<b>IP ADDRESS</b>
</li>
</ul>
<ul ng-repeat="Vote in Votes" ng-click="expand()">
<li class="created">
{{Vote.created|date}}
</li>
<li class="ip">
{{Vote.ip}}
</li>
<ul ng-show="show" ng-repeat="file in Vote.folder">
<li class="created">
{{file.created|date}}
</li>
<li class="ip">
{{file.ip}}
</li>
</ul>
<ul class="file" ng-repeat="file in Vote.file">
<li class="created">
{{file.created|date}}
</li>
<li class="ip">
{{file.ip}}
</li>
</ul>
</ul>
</div>
您需要做的是每个投票添加一个属性显示,并将该显示/隐藏状态绑定到此属性.就像是 ：
<ul ng-repeat="Vote in Votes" ng-click="expand(Vote)"> <li class="created">{{Vote.created|date}}</li> <li class="ip">{{Vote.ip}}</li> <li ng-show="Vote.show"> <ul> <li ng-repeat="file in Vote.folder">
您的展开功能将如下所示：
$scope.expand = function(Vote) { Vote.show = true; }
请参阅修改后的Plunker：http://plnkr.co/edit/gRtg4157Z3kDbNpejvFW?p=preview
以上是大佬教程为你收集整理的angularjs – 使用ng-show在点击中扩展嵌套列表全部内容，希望文章能够帮你解决angularjs – 使用ng-show在点击中扩展嵌套列表所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。