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代码
Aug 13 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
ES6基础之默认参数值
Feb 21 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
股权转让协议范本
2014/12/07 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers