angularjs select2 所选值未显示在字段中

Question

我正在使用 angularjs 和 select2 插件。

当我编辑一个可以从下拉列表中设置的属性的项目时，当前选择的值是下拉列表中的 selected/highlighted 但不可见。我必须实际单击下拉菜单才能看到实际选择的选项。基本上一开始这个字段是空的...

像这样：

如您所见，该字段为空，但如果单击它，您会看到亚利桑那州已被选中。如何在不单击的情况下直接在下拉列表中显示亚利桑那州？

这就是我将它绑定到元素的方式。

  <select data-custom-select class="form-control" data-ng-model="newType.Type" data-ng-options="t for t in definitions.Types"></select>

data-custom-select 是允许我在元素上应用 select2() 的指令：

 directive('customSelect', [function () {
    var link = function (scope, element, attrs) {
        element.select2();
    };

    return {
        restrict: 'A',
        link: link
    };
}])

型号：

$scope.newType = {
    Type: 'Type 1'
}

$scope.definitions ={
    "Definitions": [{
        "Id": "1",
        "Name": "Name 1"        
    }, {
       "Id": "2",
        "Name": "Name 2" 
    }],
    "Types": ["Type 1", "Type 2", "Type 3"]
};

Answer 1

尽量不要混淆 jQuery 插件和 angularjs。 Select2 这里有一个 angularjs 模块：angular-ui/ui-select

示例：http://jsbin.com/nojewamivu/1/edit?html,js,output

angularjs select2 所选值未显示在字段中

angularjs select2 selected value is not shown in the field

angularjs

jquery-select2

angularjs-select2