3

AngularJSとを使用Select2して、素敵なドロップダウン メニューを作成しています。

ng-clickOption タグ (Select タグの)に を含めました。ただし、 の場合、ng-click は機能していないようですSelect2。

 <select ui-select2 >
    <option ng-repeat="car in myGarage" ng-click="ride(car)">
    {{car.Name}}
    </option>
    </select>

また、通常の Select タグを使用した場合も機能しないようです。

それらを機能させるにはどうすればよいですか？

JSFiddle:

4

4 に答える 4

7

ng-click の代わりに ng-change と ng-model を使用する

<select ui-select2 ng-change="ride(car)" ng-model="car">
  <option ng-repeat="car in myGarage" value ={{car.Name}}>
    {{car.Name}}
  </option>
</select>
于 2013-06-27T11:13:59.953 に答える
2

OPはangular-ui select2を使用しています。以下は angular-iu/ui-select2 Web サイトからのものです。

「ui-select2 は <select ng-options> と互換性がありません。最良の結果を得るには、代わりに <option ng-repeat> を使用してください。」

https://github.com/angular-ui/ui-select2の「動的オプションの操作」セクションを参照してください。

したがって、おそらく ng-change が最良の選択肢です。

于 2014-02-27T11:41:24.937 に答える
2

それは選択を使用する間違った方法です。

まず、オプションの代わりに使用する必要があるng-options属性があります。selectng-repeat

次に、 を使用する代わりに、次のように、選択した車で更新する select に をng-click割り当てることができます。ng-model

コントローラーでは、次のモデルのみが必要であり、他のモデルを削除できます

$scope.myGarage = [
    {
        Name: "Toyota 86"
    },
    {
        Name: "Hyundai Genesis Coupe"
    },
    {
        Name: "Nissan GTR"
    },
    {
        Name: "Veyron"
    }
];

あなたの見解では、ng-optionsandng-modelを次のように使用します。

<select ng-model="selectedCarUI" ng-options="car.Name as car.Name 
    for car in myGarage" ui-select2>
</select>

Using UI-Select2 - Car: {{selectedCarUI}}
<select ng-model="selectedCarNormal" ng-options="car.Name as car.Name 
    for car in myGarage">
</select>

Using Normal Select - Car: {{selectedCarNormal}}

これで動作するはずです。これは同じフィドルです

于 2013-06-27T08:45:09.440 に答える
0

少し遅れているかどうかはわかりませんが、それを機能させる方法を発見しただけです：

1) オリジナルの Select2 を使用しています

<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>

2) html は次のようになります。

<select class="form-control js-example-basic-single" 
ng-options="item.label for item in yourVector" 
ng-change="yourFunction(item)" ng-model="item">
</select>

3) テンプレートの最後のスクリプト:

<script type="text/javascript">
    $(".js-example-basic-single").select2();
</script>

わたしにはできる ：）

于 2015-04-23T06:00:33.523 に答える