前言 安哥拉是操作数据来影响视图。dom封装在指令上,大大提升性能。
引入 <script src="./angular-1.3.0.js"></script>
html 结构上
| <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}}--可点击的</p> |
| | <p ng-show="bd.show">显示隐藏的内容</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: '华宝信托有限责任公司', |
| | items: [ |
| | { |
| | city: '上海市', |
| | show:'false' |
| | } |
| | ] |
| | }, |
| | { |
| | title: '华宝信托财富俱乐部', |
| | 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> |