Agularjs妙用双向数据绑定实现手风琴效果-创新互联

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

10年积累的网站建设、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有玉林免费网站建设让你可以放心的选择与我们合作。

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

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

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：Agularjs妙用双向数据绑定实现手风琴效果-创新互联
本文来源：https://www.cdcxhl.com/article44/dgsehe.html

成都网站建设公司_创新互联，为您提供外贸网站建设、建站公司、小程序开发、做网站、定制开发、面包屑导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联