angularjs select2选择的值未在字段中显示

Question

我正在使用带有select2插件的angularjs。

当我编辑具有可以从下拉列表设置属性的项目时，在下拉列表中选择/突出显示当前所选值但不可见。我必须实际单击下拉列表以查看选择的实际选项。基本上起初这个领域是空的......

像这样：

正如您所看到的那样，该字段为空，但如果您单击该字段，则表示您已选择了Arizona。如何在下拉菜单中显示亚利桑那州而不必点击它？

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

  <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。这里有angularjs个Select2模块：angular-ui/ui-select

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