angular学习之四实例:点击收缩展开下拉
2016-09-08 15:27
495 查看
我们知道平常jquery实现显示和隐藏的时候,只要在监听click的时候使用.toggle(".displayno"),如果页面已经存在隐藏类displayno,那么就移除隐藏类,将div块显示出来,否则添加隐藏类,将div块隐藏。或者使用show()+hide()方法来实现。
但是,在angular插件里面,到处都是用数据绑定来实现对应的功能,那么到底是怎么实现的呢?接下来直接上源码:
首先,
通过ng-if="Digest_show_hide_val"来控制内容的显示与否,
一开始Digest_show_hide_val=true,angular就会往html里面添加<div>12345678987654321</div>。然后Digest_show_hide_val=false,angular就好移除<div>12345678987654321</div>这串字符串。
然后通过ng-click="Digest_show()"执行函数将Digest_show_hide_val的值取反。
js源码部分:
最终展示效果如下:
默认显示的情况下
点击乡村简介的滑块,内容收缩起来
演示地址:http://runjs.cn/detail/an3sgigs
但是,在angular插件里面,到处都是用数据绑定来实现对应的功能,那么到底是怎么实现的呢?接下来直接上源码:
<div class="box m3 no-shadow no-margin no-pad"> <span class="title" ng-click="Digest_show()">乡村简介<span ng-class="{'right' : Digest_show_hide_val, 'right arrow-down' : !Digest_show_hide_val}"></span></span> <span class="txt paddingBottom100" ng-if="Digest_show_hide_val"> <div> 12345678987654321 </div> </span> </div>
首先,
通过ng-if="Digest_show_hide_val"来控制内容的显示与否,
一开始Digest_show_hide_val=true,angular就会往html里面添加<div>12345678987654321</div>。然后Digest_show_hide_val=false,angular就好移除<div>12345678987654321</div>这串字符串。
然后通过ng-click="Digest_show()"执行函数将Digest_show_hide_val的值取反。
js源码部分:
$scope.Digest_show_hide_val=true;//默认简介是展开状态 $scope.Digest_show=function(){ $scope.Digest_show_hide_val=!$scope.Digest_show_hide_val; }
最终展示效果如下:
默认显示的情况下
点击乡村简介的滑块,内容收缩起来
演示地址:http://runjs.cn/detail/an3sgigs
相关文章推荐
- fgm实例练习笔记-2.1点击展开下拉列表
- 滑动展开-收缩广告代码实例效果
- 点击显示/隐藏层,点击展开收缩隐藏层
- jquery学习第二天:超链接title提示效果、图片放大提示效果、内容展开收缩动画效果
- ExtJs中实现tree节点,全部是单击展开和收缩效果,和收藏夹点击功能一样
- 点击展开收缩
- jQuery实现可收缩展开的级联菜单实例代码
- 基于jQuery实现下拉收缩(展开与折叠)特效
- 仿QQ好友 TableView 点击展开 收缩功能实现
- 点击UITableView的cell展开收缩
- java 中实现象开发环境中那样,需要某些面板时点击展开,不需要时点击让其收缩
- TreeView的TreeNode点击展示展开和收缩的效果
- Jquery实例2:可收缩展开的级联菜单与局部刷新
- 基于jQuery实现下拉收缩(展开与折叠)特效
- 一个滑动展开/收缩广告实例
- jQuery入门学习六:可收缩展开的级联菜单
- jquery中dom操作和事件的实例学习 下拉框应用
- 浏览器打开层自动缓慢展开收缩实例代码
- jquery收缩展开效果实例代码
- 点击展开再点收缩文本的效果