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 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
jQuery插件制作的实例教程
May 16 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
微信小程序登录换取token的教程
May 31 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 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
有关PHP中MVC的开发经验分享
2012/05/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
使用console进行性能测试
2015/04/27 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python中类的初始化特殊方法
2017/12/01 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python数组循环处理方法
2019/08/26 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
餐饮商业计划书范文
2014/04/29 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书