angular-ui bootstrapによるレスポンシブ・ドロップダウン・ナビゲーションバー(正しいangularの種類で行われたもの)
質問
angular-ui-boostrapのモジュール "ui.bootstrap.dropdownToggle" を使ってドロップダウンのナビバーを持つJSFiddleを作成したのですが、どうすればよいでしょうか? http://jsfiddle.net/mhu23/2pmz5/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"> <a class="brand" href="#">
My Responsive NavBar
</a>
<ul class="nav">
<li class="divider-vertical"></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle">
Menu 1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#/list">Entry 1</a>
</li>
<li><a href="#/list">Entry 2</a>
</li>
</ul>
</li>
....
</ul>
</div>
</div>
</div>
私が理解する限り、これはこのようなドロップダウンメニューを実装するための適切な、アンギュラ的な方法です。angularjsの観点からの間違った方法は、bootstrap.jsを含み、"data-toggle="dropdown"を使用することです...。私はここで正しいですか?
さて、次のFiddleで行うように、ナビバーにレスポンシブな動作を追加したいと思います。 http://jsfiddle.net/ghtC9/6/
しかし、上記の解決策で気に入らないことがあります。この人はbootstrap.jsを含んでいるのです!
では、私の既存のナビバーにレスポンシブな動作を追加するための正しいアンギュラー的な方法は何でしょう?
私は明らかに、"nav-collapse collapse navbar-responsive-collapse" などのブートストラップのレスポンシブなナビバークラスを使用する必要があります。しかし、方法がわかりません...。
私は本当にあなたの助けを感謝します!
よろしくお願いします。 マイケル
どのように解決するのですか?
ディレクティブの "collapse" を使用することで可能です。 http://jsfiddle.net/iscrow/Es4L3/ (HTMLの2つの"Note"をチェックしてください).
<!-- Note: set the initial collapsed state and change it when clicking -->
<a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
<div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
つまり、折りたたんだ状態を変数に格納し、その変数の値を(単純に)変更することで折りたたんだ状態も変更する必要があります。
リリース0.14では
uib-
のプレフィックスを追加しました。
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
変更する
collapse
から
uib-collapse
.
関連
-
[解決済み】npm UNMET PEER DEPENDENCYの警告を修正するにはどうすればいいですか?
-
[解決済み] 方法 $state.go()
-
[解決済み] 'ApplicationSignInManager' が見つからない(ASP.NET MVC)
-
[解決済み] angularjsでチャートを作成する【終了】。
-
[解決済み] angularjsで$compileを操作する
-
angularjs が src で指定されたコンテンツを iframe 内で正しく表示しない
-
[解決済み] ng-classを使った複数クラスの追加
-
[解決済み] AngularJSでコントローラを2回実行する場合の対処法
-
[解決済み] AngularJSでコントローラ間の通信を行う正しい方法は何ですか?
-
[解決済み] Angular JSでブートストラップナンバーアクティブクラスを設定する方法は?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】typeerrorは、未定義のプロパティ'data'を読み取ることができません。
-
[解決済み] data-ng-file-selectが動作しないのはなぜですか?
-
[解決済み] シンプルなangularjsの日付入力
-
[解決済み] AngularJSでkeypressイベントを使用するには?
-
[解決済み] angularjsで$compileを操作する
-
AngularJSのベストプラクティス。ng-repeatの$indexに注意する。
-
angularでのng-repeatとtrack by
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] ng-modelとng-bindの違いは何ですか?