如何在AngularJs中获取select2值

Question

我无法获得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);    
   }

Answer 1

对于4.0.0之前的Select2版本，建议放弃Select2并使用ui-select (而不是ui-select2)，这是angularjs原生版本的Select2。Select2 4.0.0可以与AngularJS一起工作(只要它需要)，所以不再需要严格使用ui-select。

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

你的ng-model里面不包含点(.)，这意味着Angular不能轻易地监听到变化，而且可能永远不会检测到它们。因此，这是一个很容易修复的解释，为什么ng-change处理程序可能不会被触发。

另一个原因可能是Select2在摘要循环中被破坏了一半，这将使Select2的DOM在页面上碎片化，但事件处理程序不一定能像预期的那样工作。如果下拉菜单没有打开或关闭，这很容易被注意到，所以我怀疑这可能不是真正的问题。

Answer 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>

和in控制器

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