0

ブートストラップ タブを使用しています。2 つのタブ (tab1、tab2) があり、両方のタブに select2 ドロップダウンが含まれています。最初のものは正常に動作しますが、tab2 の select2 ドロップダウンは機能しません。これが私のコードです。

HTML

<div ng-controller="myctrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="active"><a data-toggle="tab" data-target="#tab1">Tab1</a></li>
  <li><a data-toggle="tab" data-target="#tab2">Tab2</a></li>       
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    <input type="hidden" id="test1"/>
  </div>
  <div id="tab2" class="tab-pane fade in active">
    <input type="hidden" id="test2"/>
  </div>
</div>
</div>

JS

myapp.controller('myctrl',function(){
    var test1 =$('#test1');
    $(test1).select2({
       data:[{'id':1,'text':'None'},{'id':2,'text':'High'},{'id':3,'text':'Medium'},{'id':4,'text':'Low'}],
    multiple: false,
    });

 var test2 =$('#test2');
 $(test2).select2({
 data:[{'id':1,'text':'None'},{'id':2,'text':'High'},{'id':3,'text':'Medium'},{'id':4,'text':'Low'}],
  multiple: false,
 });
})

私を助けてください。

4

1 に答える 1

1

このように jquery と angularjs を組み合わせるべきではありません。

Bootstrap UI ディレクティブを確認してください: http://angular-ui.github.io/bootstrap/#/tabs

于 2014-09-17T10:02:27.070 に答える