angular实现多个div的展开和折叠

前言 安哥拉是操作数据来影响视图。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> |
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容