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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
Nest.js 授权验证的方法示例
Feb 22 Javascript
详解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
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
python正则分组的应用
2013/11/10 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python与pycharm有何区别
2020/07/01 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书