16

http://angular-ui.github.com/bootstrap/のアコーディオン ディレクティブを使用しています。アコーディオンの開閉をより細かく制御する必要があります。

より正確に言うと、親アコーディオンを閉じて次のアコーディオンを開くボタンがアコーディオン グループ内に必要です (したがって、基本的に、close-others が true に設定されている場合に次のヘッダーをクリックするとどうなるかを模倣します)。また、アコーディオンを閉じて次のアコーディオンを開く前に、いくつかの検証を行う必要があります。また、アコーディオン ヘッダーのイベントをクリックするように接続する必要もあります。

私はAngularにかなり慣れていないので、現在Backbone + JQueryからAngularにアプリケーションを書き直しています。Backbone バージョンでは、Twitter Bootstrap アコーディオンを使用し、JQuery を使用してそれらを開閉していました。これを引き続き行うことはできますが、JQuery DOM 操作を完全に取り除きたいので、これに対する純粋な角度付きソリューションを探しています。

検証に関して私がやろうとしたことは

<accordion-group ng-click="close($event)">

そして私のコントローラーで

    event.preventDefault();
    event.stopPropagation();

DOM 要素がディレクティブに置き換えられ、クリック ハンドラが追加されないため、これは明らかに機能しませんでした。私はソース コードを調べてきました (そして、文書化されていない非常に優れた機能をいくつか見つけました) が、この特定の課題の解決をどこから始めればよいかについてさえ途方に暮れています。angular-ui をフォークして、この機能をアコーディオン ディレクティブに追加することを検討していましたが、ディレクティブを変更せずにこれを実現できれば、はるかに優れたものになります。

4

2 に答える 2

25

バインド可能な式を指すis-open属性があります。accordion-groupこの式を使用すると、プログラムでアコーディオンアイテムを制御できます。例：

<div ng-controller="AccordionDemoCtrl">
  <accordion>
    <accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
      {{group.content}}
    </accordion-group>    
  </accordion>
  <button class="btn" ng-click="groups[0].open = !groups[0].open">Toggle first open</button>
  <button class="btn" ng-click="groups[1].open = !groups[1].open">Toggle second open</button>
</div>

そしてここで働くプランク：http：//plnkr.co/edit/DepnVH？p = Preview

于 2013-03-22T12:38:26.327 に答える
5

@pkozlowski.opensource によるソリューションが機能しない人 (たとえば、私) は、コンポーネントを閉じる CSS を強制的に受け入れることができます (遷移なし)。

理論: angular ディレクティブは、主に標準 HTML の div 要素に展開され、CSS スタイルによってアコーディオンの外観が与えられます。class を持つ div.panel-collapseは、accordion-group 要素の本体です。以下に示すように、他のいくつかの変更とともに、2 番目のクラスを から.inに交換できます。.collapse

コード：

$scope.toggleOpen = function(project) {

        var id = '<The ID of the accordion-group you want to close>';
        var elements = angular.element($document[0].querySelector('#'+id));
        var children = elements.children();

        for(var i = 0; i < children.length; i++) {

            var child = angular.element(children[i]);

            if(child.hasClass('panel-collapse')) {
                if(child.hasClass('in')) { // it is open
                    child.removeClass('in');
                    child.addClass('collapse');
                    child.css('height', '0px');
                } else { // it is closed
                    child.addClass('in');
                    child.removeClass('collapse');
                    child.css('height', 'auto');
                }

            }
        }
    };

Angular について話しているので、ng-repeat タグを使用してアコーディオンを生成している可能性が非常に高くなります。この場合、次のような要素の ID を生成することもできます。

<accordion-group ng-repeat="user in users"
                 is-disabled="user.projects.length == 0"
                 id="USER{{user._id}}">

Mongoose モデルのユーザーが与えられた場合、私が与えている ID ではなくuser._id、先頭に「USER」が追加されていることに注意してください。これは、Mongoose が数値で始まる ID を生成する可能性があり、querySelector がそれを好まないためです ;-) 図を見てください!

于 2015-09-16T18:05:22.667 に答える