3

我正在使用AngularJS, 并Select2创建一个不错的下拉菜单。

我ng-click在 Option 标记（选择标记）中包含了一个。但是，ng-click 在Select2.

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

使用普通的 Select 标签时，它似乎也不起作用。

我怎样才能让他们工作？

JSF中：

4

4 回答 4

7

使用 ng-change 和 ng-model 而不是 ng-click

<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

这是使用选择的不正确方法。

首先，需要使用ng-optionsa 的属性而不是选项。selectng-repeat

其次，ng-click您可以将 a 分配给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 回答
2

OP 正在使用 angular-ui select2。以下来自 angular-iu/ui-select2 网站：

“ui-select2 与 <select ng-options> 不兼容。为了获得最佳结果，请改用 <option ng-repeat>。”

请参阅https://github.com/angular-ui/ui-select2上的“使用动态选项”部分

所以 ng-change 可能是最好的选择。

于 2014-02-27T11:41:24.937 回答
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 回答