각도에서의 아코디언 열기/접기 이벤트 처리

각도에서의 아코디언 열기/접기 이벤트 처리

이 코드가 있는 경우:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
</accordion-group>

Angular JS, angular-ui, Twitter Bootstrap angular angular angular 。 덧붙일 수 것을 있습니다.ng-click이는 그룹의 오픈/콜랩을 위해 HTML로 컴파일된 후에 이미 사용되고 있기 때문입니다.

아코디언 그룹에서는 아코디언 헤딩 디렉티브를 속성으로 제공하는 대신 사용할 수도 있습니다.이를 사용하여 ng클릭으로 헤더를 다른 태그로 래핑할 수 있습니다.

<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
  <accordion-heading>
    <span ng-click="opened(group, $index)">{{group.content}}</span>
  </accordion-heading>
</accordion-group>

예: http://plnkr.co/edit/B3LC1X?p=preview

다음은 pkozlowski.opensource 솔루션을 기반으로 한 솔루션입니다.
컬렉션의 각 항목에 $watch를 추가하는 대신 동적으로 정의된 속성을 사용할 수 있습니다.여기서 그룹의 IsOpened 속성을 is-open 속성에 바인드할 수 있습니다.

<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.IsOpened">
   {{group.content}}
</accordion-group>

따라서 컨트롤러 내의 컬렉션 각 항목에 IsOpened 속성을 동적으로 추가할 수 있습니다.

$scope.groups.forEach(function(item) {
  var isOpened = false;
  Object.defineProperty(item, "IsOpened", {
    get: function() {
      return isOpened;
    },
    set: function(newValue) {
      isOpened = newValue;
      if (isOpened) {
        console.log(item); // do something...
      }
    }
  });
});

시계 대신 부동산을 사용하는 것이 공연을 위해 더 좋다.

게 요.is-open바인딩 가능한 식을 가리키는 아코디언 그룹의 속성.이 식을 확인하고 특정 아코디언 그룹이 열려 있을 때 로직을 실행할 수 있습니다.을 다음과같이 할 수 .

<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
   {{group.content}}
</accordion-group>

이를 통해 컨트롤러에서 원하는 워치 식을 준비할 수 있습니다.

$scope.$watch('groups[0].open', function(isOpen){
    if (isOpen) {
      console.log('First group was opened'); 
    }    
  });

상기의 조작은 가능하지만, 실제로 사용하는 것은 조금 번거로울 수 있기 때문에, 개선이 필요하다고 생각되면, https://github.com/angular-ui/bootstrap에서 문제를 오픈합니다.

다음은 열려 있는 아코디언 요소를 쉽게 추적할 수 있는 kjv의 답변에서 영감을 얻은 솔루션입니다. 손에 잡히지 않았다ng-click헤딩을 <span>ng-click을 클릭합니다.

하나 가 있었습니다.accordion요소가 프로그래밍 방식으로 페이지에 추가되었지만 내용은 그렇지 않았습니다.Angular 렉렉 angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular angular 、{{path}}되어 있습니다.$scope 나는 가가 with로 타격을 .undefined하여 아코디언 div내장되어 있습니다.

컨트롤러:

    //initialise the open state to false
    $scope.routeDescriptors[index].openState == false

    function opened(index) 
    {
        //we need to track what state the accordion is in
        if ($scope.routeDescriptors[index].openState == true){   //close an accordion
            $scope.routeDescriptors[index].openState == false
        } else {    //open an accordion
            //if the user clicks on another accordion element
            //then the open element will be closed, so this will handle it
            if (typeof $scope.previousAccordionIndex !== 'undefined') {
                $scope.routeDescriptors[$scope.previousAccordionIndex].openState = false;
            }
            $scope.previousAccordionIndex = index;
            $scope.routeDescriptors[index].openState = true;
    }

    function populateDiv(id)
    {
        for (var x = 0; x < $scope.routeDescriptors.length; x++)
        {
            $("#_x" + x).html($scope.routeDescriptors[x]);
        }
    }

HTML:

        <div ng-hide="hideDescriptions" class="ng-hide" id="accordionrouteinfo" ng-click="populateDiv()">
            <accordion>
                <accordion-group ng-repeat="path in routeDescriptors track by $index">
                    <accordion-heading>
                        <span ng-click="opened($index)">route {{$index}}</span>
                    </accordion-heading>
                    <!-- Notice these divs are given an ID which corresponds to it's index-->
                    <div id="_x{{$index}}"></div>
                </accordion-group>
            </accordion>
        </div>

열린 상태와 모델 개체 간의 관계를 만들기 위해 연관 배열을 사용했습니다.

HTML은 다음과 같습니다.

  <div ng-controller="CaseController as controller">


                <accordion close-others="controller.model.closeOthers">
                    <accordion-group ng-repeat="topic in controller.model.topics track by topic.id" is-open="controller.model.opened[topic.id]">
                       <accordion-heading>
                          <h4 class="panel-title clearfix" ng-click="controller.expand(topic)">
                         <span class="pull-left">{{topic.title}}</span>
                         <span class="pull-right">Updated: {{topic.updatedDate}}</span>
                          </h4>                           
                       </accordion-heading>
                  <div class="panel-body">

                      <div class="btn-group margin-top-10">
                          <button type="button" class="btn btn-default" ng-click="controller.createComment(topic)">Add Comment<i class="fa fa-plus"></i></button>
                      </div>
                     <div class="btn-group margin-top-10">
                         <button type="button" class="btn btn-default" ng-click="controller.editTopic(topic)">Edit Topic<i class="fa fa-pencil-square-o"></i></button>
                     </div>
                      <h4>Topic Description</h4>
                      <p><strong>{{topic.description}}</strong></p>
                      <ul class="list-group">
                          <li class="list-group-item" ng-repeat="comment in topic.comments track by comment.id">
                              <h5>Comment by: {{comment.author}}<span class="pull-right">Updated: <span class="commentDate">{{comment.updatedDate}}</span> | <span class="commentTime">{{comment.updatedTime}}</span></span></h5>
                              <p>{{comment.comment}}</p>
                             <div class="btn-group">
                               <button type="button" class="btn btn-default btn-xs" ng-click="controller.editComment(topic, comment)">Edit <i class="fa fa-pencil-square-o"></i></button>
                               <button type="button" class="btn btn-default btn-xs" ng-click="controller.deleteComment(comment)">Delete <i class="fa fa-trash-o"></i></button>
                             </div>
                          </li>
                      </ul>
                  </div>

                    </accordion-group>
                </accordion>

컨트롤러의 스니펫은 다음과 같습니다.

   self.model = {
      closeOthers : false,
      opened   : new Array(),
      topics   : undefined
   };

토픽은 AJAX 콜에 입력됩니다.서버에서 갱신된 모델오브젝트에서 '열린' 상태를 분리하면 갱신 후에도 상태가 유지됩니다.

또, 컨트롤러에 대해서ng-controller="CaseController as controller"

아코디언 컨트롤러.접속.

MyApp.Controllers
    .controller('AccordionCtrl', ['$scope', function ($scope) {

        $scope.groups = [
            {
                title: "Dynamic Group Header - 1",
                content: "Dynamic Group Body - 1",
                open: false
            },
            {
                title: "Dynamic Group Header - 2",
                content: "Dynamic Group Body - 2",
                open: false

            },
            {
                title: "Dynamic Group Header - 3",
                content: "Dynamic Group Body - 3",
                open: false
            }
        ];

        /**
         * Open panel method
         * @param idx {Number} - Array index
         */
        $scope.openPanel = function (idx) {
            if (!$scope.groups[idx].open) {
                console.log("Opened group with idx: " + idx);
                $scope.groups[idx].open = true;
            }
        };

        /**
         * Close panel method
         * @param idx {Number} - Array index
         */
        $scope.closePanel = function (idx) {
            if ($scope.groups[idx].open) {
                console.log("Closed group with idx: " + idx);
                $scope.groups[idx].open = false;
            }
        };

    }]);

index.displaces를 표시합니다.

<div ng-controller="AccordionCtrl">

    <accordion>

        <accordion-group ng-repeat="group in groups" is-open="group.open">
            <button ng-click="closePanel($index)">Close me</button>
            {{group.content}}
        </accordion-group>


        <button ng-click="openPanel(0)">Set 1</button>
        <button ng-click="openPanel(1)">Set 2</button>
        <button ng-click="openPanel(2)">Set 3</button>

    </accordion>
</div>

각도 지시어를 사용하여 수행할 수 있습니다.

html

<div uib-accordion-group is-open="property.display_detail" ng-repeat="property in properties">
  <div uib-accordion-heading ng-click="property.display_detail = ! property.display_detail">
    some heading text
  </div>
  <!-- here is the accordion body -->
  <div ng-init="i=$index">  <!-- I keep track of the index of ng-repeat -->
    <!-- and I call a custom directive -->
    <mydirective mydirective_model="properties" mydirective_index="{% verbatim ng %}{{ i }}{% endverbatim ng %}">
      here is the body
    </mydirective>
  </div>
</div>

js

app.directive("mydirective", function() {
  return {
    restrict: "EAC",  
    link: function(scope, element, attrs) {
      /* note that ng converts everything to camelCase */
      var model = attrs["mydirectiveModel"];
      var index = attrs["mydirectiveIndex"];
      var watched_name = model + "[" + index + "].display_detail"
      scope.$watch(watched_name, function(is_displayed) {
        if (is_displayed) {
          alert("you opened something");
        }
        else {
          alert("you closed something");
        }
      });
    }
  }
});

거기서 제 설정에 관한 몇 가지 특이한 점이 있습니다(저는 Django를 사용하고 있기 때문에 "{% verbatim %}" 태그를 사용하고 있습니다만, 이 방법은 유효합니다.

언급URL : https://stackoverflow.com/questions/15642082/handle-open-collapse-events-of-accordion-in-angular