angularjs實現任意點擊一個標簽，指定的標簽展開，其他的標簽閉合

2024-04-27 15:10:02

字體：大中小

來源：轉載

供稿：網友

<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>