Agularjs妙用双向数据绑定实现手风琴效果


Posted in Javascript onMay 26, 2017

最近在工作总遇到需要实现类似手风琴效果的需求,如下图所示:

Agularjs妙用双向数据绑定实现手风琴效果 

因为汇总(上半部分)和明细(下面的浅色部分)在不同的情况下显示的字段数量是不一样的,而且还有编辑和展示的状态切换,所以需要自己实现手风琴效果。

初步的想法是用css的transform做动效,点击详情按钮(或中间部分的下拉图标)时请求详情数据,然后将详情部分的height设置成指定高度,再次点击详情按钮(或中间部分的下拉图标),详情部分被收起。

但是这样的问题在于我们如何精确的控制到底该显示哪一行汇总数据的明细和关闭其他行的明细,经过一番思考我决定利用一下双向数据绑定来帮我完成这个事情。具体代码如下:

js:

$scope.toogleShowDtl = function (item, e) {
       //阻止事件冒泡
       e.stopPropagation();
      for (var i = 0; i < $scope.OrderHdr.length; i++) {
        if ($scope.OrderHdr[i].Bill_Hdr_Id != item.Bill_Hdr_Id) {
          $scope.OrderHdr[i].mxShow = false;
          $scope.OrderHdr[i].iconChange = "glyphicon glyphicon-menu-down";
        }
      }
      switch (item.mxShow) {
        case undefined:
          item.mxShow = true;
          item.iconChange = "glyphicon glyphicon-menu-up";
          break;
        case true:
          item.mxShow = false;
          item.iconChange = "glyphicon glyphicon-menu-down";
          break;
        case false:
          item.mxShow = true;
          item.iconChange = "glyphicon glyphicon-menu-up";
          break;
        default:
          item.mxShow = false;
          item.iconChange = "glyphicon glyphicon-menu-down";
          break;
      }
    }

html:

<div class="col-sm-12 detial_box" ng-click="selectHdr($index)" ng-class="{ dtl_select : $index == selectedIndex }">
  <div class="col-sm-3" style="margin-top:60px; ">
   <button class="btn btn-primary" ng-click="toogleShowDtl(o,$event)">详情</button>
  </div>
  <div class="down_img">
    <span class="{{o.iconChange}} glyphicon glyphicon-menu-down" ng-click="toogleShowDtl(o,$event)"></span>
  </div>
</div>
<div class="col-sm-12 mx_box check-element animate-show-hide" ng-show="o.mxShow">
  <!--明细内容-->
</div>

当点击事件触发的时候,当前行数据中并没有mxShow这个字段,故循环为其添加上该字段并赋值为false,当前被点击的行不能执行这个操作,否则第一次点击的时候改行的明细是不会展示的。后面的switch case语句保证了第一次点击mxShow没有值 以及mxShow值切换的问题。item.iconChange 的值是用来控制中间字体图标的切换,当明细没展示的时候图标是向下的,代表可以展开,当明细显示的时候图标向上,代表可以收起。

ng-show="o.mxShow" 根据mxShow的值来确定明细是否展示。

class="{{o.iconChange}} glyphicon glyphicon-menu-down"

用来切换图标

最终效果图如下(不知道怎么上传动图o(?□?)o)

Agularjs妙用双向数据绑定实现手风琴效果

以上所述是小编给大家介绍的Agularjs妙用双向数据绑定实现手风琴效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
vue实现文字加密功能
Sep 27 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 #Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 #Javascript
jQuery导航条固定定位效果实例代码
May 26 #jQuery
mongoose中利用populate处理嵌套的方法
May 26 #Javascript
Angularjs修改密码的实例代码
May 26 #Javascript
详解vue.js的devtools安装
May 26 #Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 #Javascript
You might like
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
angular实现input输入监听的示例
2018/08/31 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
浅析NumPy 切片和索引
2020/09/02 Python
python 利用zmail库发送邮件
2020/09/11 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
机械设备与数控技术专业求职信
2014/08/10 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
党员自评材料范文
2014/12/17 职场文书
教师听课评语大全
2014/12/31 职场文书
团支部书记竞选稿
2015/11/21 职场文书
python利用while求100内的整数和方式
2021/11/07 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis