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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 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使用redis消息队列发布微博的方法示例
2017/06/22 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
使用pdb模块调试Python程序实例
2015/06/02 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python中requests小技巧
2017/05/10 Python
Python 私有函数的实例详解
2017/09/11 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
Ajax和javascript的区别
2013/07/20 面试题
企业军训感言
2014/02/08 职场文书
环保建议书500字
2014/05/14 职场文书
2014年教研工作总结
2014/12/06 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
学校隐患排查制度
2015/08/05 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python