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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jquery validate demo 基础
Oct 29 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
详解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
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
js Dialog 实践分享
2012/10/22 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
Java中实现多态的机制
2015/08/09 面试题
办公室主任岗位职责
2013/11/08 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
仓管员岗位职责
2015/02/03 职场文书
旷工检讨书大全
2015/08/15 职场文书
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript