前言 安哥拉是操作數(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> |