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妙用双向数据绑定实现手风琴效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
路由是实现单页面应用的一种方式,通过监听hash或者history的变化,渲染不同的组件,起到局部更新的作用,避免每次URL变化都向服务器请求数据,本文给大家介绍Angular 中的路由,感兴趣的朋友一起看看吧2023-11-11
angular8.5集成TinyMce5的使用和详细配置(推荐)
这篇文章主要介绍了angular8.5集成TinyMce5的使用和详细配置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了angular1配合gulp和bower使用教程，本文给大家介绍的非常详细，具有参考借鉴价值,需要的朋友可以参考下2018-01-01
这篇文章主要为大家介绍了Angular的FormArray和模态框结合使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Angular8 简单表单验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了AngularJS实现表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
今天用angular写table的时候，遇到了一个问题。在ng-repeat中，含有动态的html，而这些html中含有自定义指令，怎么实现呢？下面小编给大家分享AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法，一起看看吧2017-01-01
这篇文章主要介绍了AngularJS学习第一篇，分享了有关AngularJS的基础知识，主要包括指令、过滤器等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
详解Angular调试技巧之报错404(not found)
本篇文章主要介绍了详解Angular调试技巧之报错404(not found)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了AngularJS实现多级下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论