如何在 AngularJs 中获取 select2 值答案

【问题标题】：How to get select2 value in AngularJs如何在 AngularJs 中获取 select2 值
【发布时间】：2015-05-31 17:58:47
【问题描述】：

我无法获得 select2 的值。这是我的代码：

<select id="categoryId" class="category"            
                        ng-model="selectedCategory"
                        ng-options="selectedCategories.name for selectedCategories in categories"
                        ng-change="selectedCategory()">
                        <option></option>
                    </select>

在我的控制器中我写了这个：

    .....  

  function initializeSelect2 (){
        $category.select2({
                allowClear: true
        });
   }

   $scope.selectedCategory = function (){
        console.log('selectCategory: '+ $scope.selectedCategory);    
   }

【问题讨论】：

你需要使用ui-select2 github.com/angular-ui/ui-select2 这是select2的角度版本
请注意，ui-select2 已被弃用并为 select2@~3.4 编写，可能不适用于 select2@4.0

标签： angularjs jquery-select2 angularjs-select2

【解决方案1】：

对于 4.0.0 之前的 Select2 版本，建议删除 Select2 并使用 ui-select（不是 ui-select2），这是 Select2 的 AngularJS 原生版本。尽管 Select2 4.0.0 可以与 AngularJS 一起使用（尽可能多地使用），因此不再严格需要使用 ui-select。

这里的问题是 DOM change 事件（由 Select2 触发）与 AngularJS change 事件不同，这是您正在听的。每当ng-model 的值发生变化时，AngularJS change 事件就会被触发，在您的情况下，这可能不是您所期望的。

您的 ng-model 中不包含点 (.)，这意味着 Angular 将无法轻松地监听更改，并且可能永远无法检测到它们。这就是为什么 ng-change 处理程序可能不会被触发的一个容易解决的解释。

另一个原因可能是 Select2 在摘要循环中被销毁了一半，这将使 Select2 的 DOM 分散在页面周围，但事件处理程序不一定按预期工作。下拉菜单没有打开或关闭很容易注意到这一点，所以我怀疑这实际上可能不是问题。

【讨论】：

【解决方案2】：

对于新手来说，快速而肮脏的解决方案是将属性 ng-value 替换为 value 并使用原生 javascript 获取 value 并将其分配给范围变量。

<select id="categoryId" class="category"            
                    ng-model="selectedCategory"
                    ng-change="selectedCategory()">
                    <option ng-repeat="selectedCategories in categories" value="selectedCategories"></option>
</select>

在控制器中

$scope.selectedCategory.name = document.getElementById('categoryId').value;

【讨论】：