最近在工作总遇到需要实现类似手风琴效果的需求，如下图所示：
因为汇总（上半部分）和明细（下面的浅色部分）在不同的情况下显示的字段数量是不一样的，而且还有编辑和展示的状态切换，所以需要自己实现手风琴效果。
初步的想法是用css的transform做动效，点击详情按钮（或中间部分的下拉图标）时请求详情数据，然后将详情部分的height设置成指定高度，再次点击详情按钮（或中间部分的下拉图标），详情部分被收起。
但是这样的问题在于我们如何精确的控制到底该显示哪一行汇总数据的明细和关闭其他行的明细，经过一番思考我决定利用一下双向数据绑定来帮我完成这个事情。具体代码如下：
js：
rush:js;">
$s
cope.toogleShowDtl = function (item,e) {
//阻止事件冒泡
e.stopPropagation();
for (var i = 0; i < $s
cope.OrderHdr.length; i++) {
if ($s
cope.OrderHdr[i].Bill_Hdr_Id != item.Bill_Hdr_Id) {
$s
cope.OrderHdr[i].mxShow = false;
$s
cope.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：
rush:js;">
Box" ng-click="selectHdr($index)" ng-class="{ dtl_select : $index == selecte
dindex }">
Box check-element animate-show-hide" ng-show="o.mxShow">
当点击事件触发的时候，当前行数据中并没有mxShow这个字段，故循环为其添加上该字段并赋值为false，当前被点击的行不能执行这个操作，否则第一次点击的时候改行的明细是不会展示的。后面的switch case语句保证了第一次点击mxShow没有值 以及mxShow值切换的问题。item.iconChange 的值是用来控制中间字体图标的切换，当明细没展示的时候图标是向下的，代表可以展开，当明细显示的时候图标向上，代表可以收起。
ng-show="o.mxShow" 根据mxShow的值来确定明细是否展示。
rush:js;">
class="{{o.iconChange}} glyphicon glyphicon-menu-down"
用来切换图标
最终效果图如下（不知道怎么上传动图o(╯□╰)o）
以上所述是小编给大家介绍的Agularjs妙用双向数据绑定实现手风琴效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文地址：https://www.jb51.cc/js/38989.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
