Agularjs が双方向データ バインディングを使用してアコーディオン効果を実現する方法の詳細な紹介

最近、私はいつも仕事でアコーディオンのような効果を実現する必要性に遭遇します。次のエディターがこの記事を通して皆さんと共有しますangularjs双方向データバインディングを使用してアコーディオン効果を実現する方法。必要な友人はそれを参照してください

最近、私は仕事で、次の図に示すように、アコーディオンのような効果を実現する必要性に常に遭遇します。 ) と詳細 (下の明るい色の部分) は状況によって異なります。また、編集と表示の間の

状態

の切り替えもあるので、アコーディオン効果を自分で実装する必要があります。

最初のアイデアは、CSS の trans

form を使用してアニメーションを作成し、詳細 ボタン

(または中央部分のドロップダウン アイコン) をクリックしたときに詳細データをリクエストし、

を設定することです。詳細部分の高さを指定した高さに調整し、もう一度詳細ボタン (または中央のドロップダウン アイコン) をクリックして、詳細セクションを折りたたみます。 しかし、問題は、どの行でデータを要約し、他の行の詳細を閉じるかをどのように正確に制御できるかということにあります。少し考えた結果、これを実現するために双方向データ バインディングを使用することにしました。具体的なコードは次のとおりです。 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>

click イベントがトリガーされると、データの現在の行に mxShow フィールドがないため、ループ

はこのフィールドを追加して、現在、値は false です。クリックされた行に対してこの操作を実行することはできません。そうしないと、最初にクリックしたときに行変更の詳細が表示されません。次の switch case ステートメントは、mxShow の最初のクリックに値がないことと、mxShow 値の切り替えの問題を確実に解決します。 item.iconChange の値は、中央のフォント アイコンの切り替えを制御するために使用されます。詳細が表示されていない場合、アイコンは下向きになります。これは、詳細が表示されている場合、アイコンが上向きになることを意味します。折りたたむことができます。

mxShowの値に基づいて詳細を表示するかどうかを決定します。

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

はアイコンの切り替えに使用します 最終的なレンダリングは次のとおりです（

アニメーションのアップロード方法がわかりませんo(╯□╰)o）

ng-show="o.mxShow"

以上がAgularjs が双方向データ バインディングを使用してアコーディオン効果を実現する方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。