3

同じWebアプリケーションでangular-uiとbootstrapを使用していますが、ui-select2コンポーネントを使用しようとすると問題が発生します.ドロップダウンリストで要素を選択すると、 ng-model に関連付けられた変数は正しく更新されますが、空のように表示されます。メイン ページから bootstrap.js ファイルのインクルードを削除すると、この奇妙な動作はなくなります。angular-js とブートストラップの両方を同時に使用した経験がある人、および/またはそれらを連携させるために適用する微調整について知っている人はいますか?

アップデート:

ui-select2 コンポーネントは input-append div 内にあり、div を削除するだけで問題が解決します。ここで Angular-ui ui-select2 オリジナル サンドボックス デモのフォークを作成しました。「バージョン 2」の例に移動して、リスト内の値を選択するとモデルが正しく更新されるが、入力要素が更新されないことを確認できます。

4

1 に答える 1

6

input-append肝心なのは、Select2と一緒にネイティブに使用することはできないということです。HTMLに入力した入力は実際には非表示になり、Select2は追加のDOM要素(div、リスト、入力)を挿入します。これらはすべて非表示/表示され、すべて独自のCSSを持ちます。

あなたが抱えている問題は、BootstrapとSelect2の間でCSSが競合していることが原因です。

A:input-appendを使用しない、B:CSSを書き直したり微調整したりして、関連する要素を再表示する、C:代わりに、事前入力またはBootstrapのCSSとうまく連携するその他のソリューションを使用することを検討してください。

AngularUI Bootstrap Projectをチェックアウトするか、AngularUIPassthroughディレクティブを使用してBootstrapディレクティブを実行する方法を示すこのPlunker/Gistをチェックアウトできます。

于 2013-01-16T00:08:33.717 に答える