angular實(shí)現(xiàn)多個(gè)div的展開和折疊

前言 安哥拉是操作數(shù)據(jù)來(lái)影響視圖。dom封裝在指令上,大大提升性能。

引入 <script src="./angular-1.3.0.js"></script>

html 結(jié)構(gòu)上


| <body ng-app="app"> |
|  | <ul ng-controller="myCtrl" style="list-style:none;"> |
|  | <li ng-repeat="li in listwz track by $index" style="margin:5px;"> |
|  | <div style="width: 189px;height: 30px;line-height: 30px;color: #e42d2d;" >{{li.title}}</div> |
|  | <div style=" background: #ccc;width: 200px;"> |
|  | <ul> |
|  | <li style="background-color: burlywood;" ng-repeat="bd in li.items track by $index " > |
|  | <h3>{{bd.city}}</h3> |
|  | <p ng-click="show($parent.$index,$index)">{{bd.show}}--可點(diǎn)擊的</p> |
|  | <p ng-show="bd.show">顯示隱藏的內(nèi)容</p> |
|  | </li> |
|  | </ul> |
|  | </div> |
|  | </li> |
|  | </ul> |
|  |  
|  | 
|  | </body> |

邏輯處理

<script src="[./angular-1.3.0.js](./angular-1.3.0.js)"></script> |
|  | <script type="text/javascript"> |
|  | var app=angular.module('app', []); |
|  | app.controller('myCtrl',function($scope){ |
|  |  |
|  |  |
|  |  |
|  | $scope.listwz = [ |
|  | { |
|  | title: '華寶信托有限責(zé)任公司', |
|  | items: [ |
|  | { |
|  | city: '上海市', |
|  | show:'false' |
|  | } |
|  | ] |
|  | }, |
|  | { |
|  | title: '華寶信托財(cái)富俱樂(lè)部', |
|  | items: [ |
|  | { |
|  | city: '北京市', |
|  | show:'true' |
|  | }, |
|  | { |
|  | city: '杭州市', |
|  | show:'true' |
|  | }, |
|  | { |
|  | city: '深圳市', |
|  | show:'true' |
|  | }, |
|  | { |
|  | city: '成都市', |
|  | show:'true' |
|  | }, |
|  | { |
|  | city: '武漢市111111', |
|  | show:'true' |
|  | } |
|  | ] |
|  | }] |
|  |  |
|  |  |
|  | $scope.show=function(a,b){ |
|  | $scope.listwz[a].items[b].show=!$scope.listwz[a].items[b].show; |
|  | } |
|  | }) |
|  | </script> |
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容