首頁 > web前端 > js教程 > 關於Agularjs如何使用雙向資料綁定實現手風琴效果的詳細介紹

關於Agularjs如何使用雙向資料綁定實現手風琴效果的詳細介紹

黄舟
發布: 2017-05-27 10:48:03
原創
1816 人瀏覽過

最近在工作總遇到需要實現類似手風琴效果的需求,下面小編透過本文給大家分享angularjs巧用雙向資料綁定達到手風琴效果,需要的朋友可以參考下

最近在工作總遇到需要實現類似手風琴效果的需求,如下圖所示:

## 關於Agularjs如何使用雙向資料綁定實現手風琴效果的詳細介紹

因為匯總(上半部)和明細(下面的淺色部分)在不同的情況下顯示的字段數量是不一樣的,而且還有編輯和展示的

狀態切換,所以需要自己實現手風琴效果。

初步的想法是用css的trans

form做動效,點擊詳情按鈕(或中間部分的下拉圖示)時請求詳情數據,然後將詳情部分的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:

<p class="col-sm-12 detial_box" ng-click="selectHdr($index)" ng-class="{ dtl_select : $index == selectedIndex }">
  <p class="col-sm-3" style="margin-top:60px; ">
   <button class="btn btn-primary" ng-click="toogleShowDtl(o,$event)">详情</button>
  </p>
  <p class="down_img">
    <span class="{{o.iconChange}} glyphicon glyphicon-menu-down" ng-click="toogleShowDtl(o,$event)"></span>
  </p>
</p>
<p class="col-sm-12 mx_box check-element animate-show-hide" ng-show="o.mxShow">
  <!--明细内容-->
</p>
登入後複製

當點擊事件觸發的時候,目前行資料中並沒有mxShow這個字段,故

循環為其添加上該字段並賦值為false,當前被點擊的行不能執行這個操作,否則第一次點擊的時候改行的明細是不會展示的。後面的switch case語句保證了第一次點選mxShow沒有值 以及mxShow值切換的問題。 item.iconChange 的值是用來控制中間字體圖示的切換,當明細沒展示的時候圖示是向下的,代表可以展開,當明細顯示的時候圖示向上,代表可以收起。

ng-show="o.mxShow" 根據mxShow的值來決定明細是否顯示。

class="{{o.iconChange}} glyphicon glyphicon-menu-down"
登入後複製

用來切換圖示

最終效果圖如下(不知道怎麼

上傳動圖o(╯□╰)o)

關於Agularjs如何使用雙向資料綁定實現手風琴效果的詳細介紹

################### #######

以上是關於Agularjs如何使用雙向資料綁定實現手風琴效果的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板