Agularjs妙用双向数据绑定实现手风琴效果

最近在工作总遇到需要实现类似手风琴效果的需求，如下图所示：

创新互联专注于企业全网营销推广、网站重做改版、平川网站定制设计、自适应品牌网站建设、H5建站、成都商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为平川等各大城市提供网站开发制作服务。

因为汇总（上半部分）和明细（下面的浅色部分）在不同的情况下显示的字段数量是不一样的，而且还有编辑和展示的状态切换，所以需要自己实现手风琴效果。

初步的想法是用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：

当点击事件触发的时候，当前行数据中并没有mxShow这个字段，故循环为其添加上该字段并赋值为false，当前被点击的行不能执行这个操作，否则第一次点击的时候改行的明细是不会展示的。后面的switch case语句保证了第一次点击mxShow没有值以及mxShow值切换的问题。item.iconChange 的值是用来控制中间字体图标的切换，当明细没展示的时候图标是向下的，代表可以展开，当明细显示的时候图标向上，代表可以收起。

ng-show="o.mxShow" 根据mxShow的值来确定明细是否展示。

class="{{o.iconChange}} glyphicon glyphicon-menu-down"

用来切换图标

最终效果图如下（不知道怎么上传动图o(╯□╰)o）

Agularjs妙用双向数据绑定实现手风琴效果

以上所述是小编给大家介绍的Agularjs妙用双向数据绑定实现手风琴效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！

分享文章：Agularjs妙用双向数据绑定实现手风琴效果
链接分享：http://scjbc.cn/article/pidejh.html

Agularjs妙用双向数据绑定实现手风琴效果

其他资讯