快捷導(dǎo)航

Agularjs妙用雙向數(shù)據(jù)綁定實(shí)現(xiàn)手風(fēng)琴效果

更新時(shí)間：2017年05月26日 13:57:41 作者：Coding秀林

最近在工作總遇到需要實(shí)現(xiàn)類似手風(fēng)琴效果的需求,下面小編通過(guò)本文給大家分享angularjs巧用雙向數(shù)據(jù)綁定實(shí)現(xiàn)手風(fēng)琴效果,需要的朋友可以參考下

最近在工作總遇到需要實(shí)現(xiàn)類似手風(fēng)琴效果的需求，如下圖所示：

這里寫圖片描述

因?yàn)閰R總（上半部分）和明細(xì)（下面的淺色部分）在不同的情況下顯示的字段數(shù)量是不一樣的，而且還有編輯和展示的狀態(tài)切換，所以需要自己實(shí)現(xiàn)手風(fēng)琴效果。

初步的想法是用css的transform做動(dòng)效，點(diǎn)擊詳情按鈕（或中間部分的下拉圖標(biāo)）時(shí)請(qǐng)求詳情數(shù)據(jù)，然后將詳情部分的height設(shè)置成指定高度，再次點(diǎn)擊詳情按鈕（或中間部分的下拉圖標(biāo)），詳情部分被收起。

但是這樣的問(wèn)題在于我們?nèi)绾尉_的控制到底該顯示哪一行匯總數(shù)據(jù)的明細(xì)和關(guān)閉其他行的明細(xì)，經(jīng)過(guò)一番思考我決定利用一下雙向數(shù)據(jù)綁定來(lái)幫我完成這個(gè)事情。具體代碼如下：

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">
  <!--明細(xì)內(nèi)容-->
</div>

當(dāng)點(diǎn)擊事件觸發(fā)的時(shí)候，當(dāng)前行數(shù)據(jù)中并沒(méi)有mxShow這個(gè)字段，故循環(huán)為其添加上該字段并賦值為false，當(dāng)前被點(diǎn)擊的行不能執(zhí)行這個(gè)操作，否則第一次點(diǎn)擊的時(shí)候改行的明細(xì)是不會(huì)展示的。后面的switch case語(yǔ)句保證了第一次點(diǎn)擊mxShow沒(méi)有值以及mxShow值切換的問(wèn)題。item.iconChange 的值是用來(lái)控制中間字體圖標(biāo)的切換，當(dāng)明細(xì)沒(méi)展示的時(shí)候圖標(biāo)是向下的，代表可以展開，當(dāng)明細(xì)顯示的時(shí)候圖標(biāo)向上，代表可以收起。

ng-show="o.mxShow" 根據(jù)mxShow的值來(lái)確定明細(xì)是否展示。

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

用來(lái)切換圖標(biāo)

最終效果圖如下（不知道怎么上傳動(dòng)圖o(╯□╰)o）

這里寫圖片描述

以上所述是小編給大家介紹的Agularjs妙用雙向數(shù)據(jù)綁定實(shí)現(xiàn)手風(fēng)琴效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: