[解決済み】Angularjs accordion ng-click on panel-header
2022-02-17 14:24:42
質問
AngularJS UI Bootstrapで、以下の機能を有効にしたい。 isopen というときに パネルヘッダー がクリックされるのですが、方法が見つかりませんでした。 このバージョンでは、リンクをクリックした場合のみ有効です。
試してみたのはこんな感じです。
<accordion-group is-open="isopen">
<accordion-heading ng-click="isopen=!isopen">
I can have markup, too!
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
ng-click="isopen=!isopen "です。
ありがとうございました。
どのように解決するのですか?
EDITです。
より良い解決策は
ng-click="isopen=!isopen"
を
accordion-group
要素を使用します。この方法で、パネルは、縁を含むパネルヘッディングの任意の場所をクリックして開閉されます。
<accordion close-others="oneAtATime">
<accordion-group is-open="isopen" ng-click="isopen=!isopen">
<accordion-heading >
I can have markup, too!
<i class="pull-right glyphicon"
ng-class="{'glyphicon- chevron-down': isopen, 'glyphicon-chevron-right': !isopen}">
</i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
END EDIT
の内容を囲みます。
<accordion-heading>
の中に
<div>
<accordion close-others="oneAtATime">
<accordion-group is-open="isopen" >
<accordion-heading ng-click="isopen=!isopen">
<div>
I can have markup, too!
<i class="pull-right glyphicon"
ng-class="{'glyphicon- chevron-down': isopen, 'glyphicon-chevron-right': !isopen}">
</i>
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
関連
-
[解決済み】angularのonLoadとng-initの違いについて
-
[解決済み] ag-gridの行の追加/削除
-
[解決済み] エラーです。[$injector:unpr] 不明なプロバイダです。ルートプロバイダ
-
[解決済み] AngularJS: ngRouteが動作しない。
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] AngularJSの.$on()とは?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] angularJSのSTATEを理解する
-
[解決済み] Angular ng-repeat エラー "リピータ内の重複は許可されません。"
-
[解決済み] AngularJSのシンプルな "Hello, world "が動作しない。
-
[解決済み] 'ApplicationSignInManager' が見つからない(ASP.NET MVC)
-
[解決済み] どのようにangularJSでrouteProviderとlocationProviderを設定するのですか?
-
[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは?
-
[解決済み] ディレクティブ '...' が要求するコントローラ 'ngModel' が見つかりません。
-
[解決済み] AngularJS : ローカルストレージを使用する
-
[解決済み] AngularJS: ngRouteが動作しない。
-
[解決済み] AngularJSのサービスをコンソールからテストするにはどうしたらいいですか?