Agularjs가 양방향 데이터 바인딩을 사용하여 아코디언 효과를 얻는 방법에 대한 자세한 소개

최근 직장에서 아코디언과 같은 효과를 얻고 싶은 욕구가 항상 느껴집니다. 다음 편집자가 이 글을 통해 여러분과 공유하겠습니다. angularjs양방향의 현명한 사용 data 바인딩아코디언 효과를 얻으려면 필요한 친구는

을 참고하세요. 최근 저는 직장에서 다음과 같이 아코디언과 같은 효과를 구현해야 하는 필요성을 항상 느꼈습니다. 사진:

요약(상단)과 세부정보(아래 밝은 색 부분)에 표시되는 필드의 개수는 상황에 따라 다르며, @🎜도 있기 때문입니다. @status 편집과 표시 사이를 전환하므로 직접 수행해야 합니다. 아코디언 효과를 얻으세요.

초기 아이디어는 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 값을 할당합니다. 현재 클릭한 행에서는 이 작업을 수행할 수 없습니다. 그렇지 않으면 처음 클릭할 때 행 변경 세부 정보가 표시되지 않습니다. 다음 스위치 케이스 문은 mxShow의 첫 번째 클릭에 값이 없고 mxShow 값 전환 문제가 발생하는지 확인합니다. item.iconChange 값은 가운데 글꼴 아이콘의 전환을 제어하는 ​​데 사용됩니다. 세부 사항이 표시되지 않을 때 아이콘은 아래쪽으로 표시되며, 이는 세부 사항이 표시될 때 아이콘이 위쪽으로 표시됨을 의미합니다. 무너질 수 있습니다.

mxShow 값을 기준으로 세부사항 표시 여부를 결정합니다. ng-show="o.mxShow"

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

는 아이콘 전환에 사용됩니다

최종 렌더링은 다음과 같습니다. (

업로드 방법을 모르겠습니다 애니메이션 o(╯□╰)o)

위 내용은 Agularjs가 양방향 데이터 바인딩을 사용하여 아코디언 효과를 얻는 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!