HTML 选择。 Select2 + ng-click = 不工作？答案

【问题标题】：HTML Select. Select2 + ng-click = Not working?HTML 选择。 Select2 + ng-click = 不工作？
【发布时间】：2013-06-24 14:15:22
【问题描述】：

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

我在 Option 标记（Select 标记）中包含了一个ng-click。但是，在 Select2 中时，ng-click 似乎不起作用。

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

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

我怎样才能让它们工作？

JSFiddle:

【问题讨论】：

您能否提供更多详细信息？似乎所有绑定都已解决。

标签： html select angularjs

【解决方案1】：

使用 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>

【讨论】：

为什么 ng-model 'car' 绑定到 'myCarTodaySelect2'？
在函数 Ride 中，我们将 car 的值分配给范围变量 myCarTodaySelect2
当你使用惰性选择时，点击选择时填充，这个解决方案不好。
它在 chrome 浏览器中是相反的，意味着 Select2 的菜单有效而普通菜单无效，我在 Mozilla 浏览器中检查过，两者都有效。我有同样的问题，但我无法通过这个答案得到解决方案。

【解决方案2】：

这是使用选择的错误方法。

首先，select 的 ng-options 属性需要在选项中使用，而不是 ng-repeat。

其次，您可以将ng-model 分配给使用所选汽车更新的选择，而不是使用ng-click，如下所示：

在您的控制器中，您只需要以下模型，您可以删除其他模型

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

在您看来，使用ng-options 和ng-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}}

现在应该可以了。 Here 是相同的小提琴

【讨论】：

几句话。 ngOptions 指令不是 ngRepeat 的首选，它只是一种选择。两者同样有效，但用途略有不同。 ngModel 不是 ngClick 的替代品，但在调用 ride 方法的模型上的 ngModel+$watcher 是（$scope.$watch('selectedCar', function(car){$scope.ride(car)}其中selectedCar是选择元素上 ngModel 指令的模型）。
同意。我并不是说它们是替代品，只是在select

【解决方案3】：

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

“ui-select2 与

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

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

【讨论】：

【解决方案4】：

我不知道是不是有点晚了，但我只是发现如何让它工作：

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>

它对我有用:)

【讨论】：