web-dev-qa-db-ja.com

Angularでアコーディオンの開閉イベントを処理する

このコードがある場合：

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

AngularJS、angular-ui、Twitter Bootstrapを使用して、アコーディオンを開いたときに何らかのアクションを呼び出すことは可能ですか？ ng-clickを単純に追加できないことは知っています。これは、グループを開いたり折りたたんだりするためにHTMLに「コンパイル」された後に既に使用されているためです。

javascripttwitter-bootstrapangularjsangular-ui
40
Michal

そこには 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 で問題を開いてください。

24
pkozlowski.opensource

アコーディオングループは、属性として提供する代わりに、アコーディオン見出しディレクティブも許可します。これを使用して、ng-clickでヘッダーを別のタグにラップできます。

<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

32
kjv

以下は、pkozlowski.opensourceソリューションに基づいたソリューションです。
コレクションの各アイテムに$ watchを追加する代わりに、dynamically defined Propertyを使用できます。ここでは、groupの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...
      }
    }
  });
});

watchesの代わりにpropertiesを使用すると、パフォーマンスが向上します。

29
Khonsort

連想配列を使用して、開いた状態とモデルオブジェクトの関係を作成しました。

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"でコントローラーを宣言します

1
Gary Murphy

accordion-controller.js

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.html

<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>
0
Elise Chant

以下は、どのアコーディオン要素が開いているかを簡単に追跡するkjvの答えに触発されたソリューションです。 ng-clickタグで要素を囲み、ng-clickを追加するとうまくいきましたが、アコーディオンの見出しで<span>を取得するのが難しいことがわかりました。

私が遭遇した別の問題は、プログラムでaccordion要素がページに追加されましたが、コンテンツはそうではなかったことです。 {{path}}変数にリンクされたAngular=ディレクティブ（つまり$scope）]を使用してコンテンツをロードしようとすると、undefinedでヒットするため、内部に埋め込まれたID 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>
0
JohnDoe

Angularディレクティブ：

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％}」タグ）、このメソッドは機能するはずです。

0
trubliphone