<html ng-app="myApp"><head> <script src="angular.js"></script></head><body><div ng-controller="myControl"> <table class="table"> <tr ng-repeat="info in infoList"> <td> <a ng-click="doMenu(info,true)"> <span>{{info.item}}</span> </a> <ul ng-if="info.sublist.length" ng-show="info.showSubAble" > <li ng-repeat="subinfo in info.sublist"> <span>{{subinfo.name}}</span> <span>{{subinfo.name2}}</span> <span>{{subinfo.name3}}</span> <span>{{subinfo.name4}}</span> </li> </ul> </td> </tr> </table></div><script> var app = angular.module("myApp", []); app.controller("myControl", function($scope) { $scope.infoList = [ {id:"1",sublist:[{name:'小花1'},{name2:"小花2"},{name3:"小花2"},{name4:"小花2"}],item:"item1",showSubAble:false}, {id:"2",sublist:[{name:'小花2'},{name2:"小花2"}],item:"item2",showSubAble:false}, {id:"3",sublist:[{name:'小花3'},{name2:"小花2"}],item:"item3",showSubAble:false} ]; $scope.doMenu = function(menuInfo,type) { if(type){ if(menuInfo.showSubAble){ menuInfo.showSubAble=!type; }else{ menuInfo.showSubAble=type; this.infoList.forEach(function(item){ if(item.id!=menuInfo.id){ item.showSubAble=!type; }else{ item.showSubAble=type; } }); } } }; });</script></body></html>
新聞熱點
疑難解答
