使用 ui-select 与 Angularjs 和 ajax 值

Question

我正在尝试从Select2 v4切换到ui-select angularjs包装器。我通过 ajax 调用填充值：

$http({
        method: 'GET',
        url: 'roles'
    }).then(function successCallback(response) {
        $scope.roles = response.data.result;
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

我想使用 select2 主题显示角色名称并保存到我的表单变量角色 ID 中。在 Select2 中，我使用了以下代码：

<select class="form-control select2"
    style="width: 100%;" name="role" data-ng-model="newUser.role"
    data-ng-options="role.idRole as role.role for role in roles track by role.role"
    required>
</select>

但它没有占位符、默认值和允许清除。所以我使用 ui-select 进行设置：

<ui-select style="width: 100%;" theme="select2" data-ng-model="newUser.role"> 
    <ui-select-match placeholder="Select role"> <span data-ng-bind="role.role"></span> </ui-select-match> <ui-select-choices
        repeat="role in (roles | filter: $select.search) track by role.role">
    <span data-ng-bind="role.role"></span> </ui-select-choices> 
</ui-select>

但它不起作用，我只看到空选择，没有找到元素。但奇怪的是，使用引导主题，如果我看不到我选择的女巫，我也会看到值。你能帮我吗？

更新使用 select2 v3.4.5（我使用的是 4），它与引导主题具有相同的问题。

Answer 1

我切换到引导程序，我使用了以下代码：

<ui-select theme="bootstrap" style="width: 100%;"
    data-ng-model="newUser.role" required> 
    <ui-select-match placeholder="Select role">
       {{$select.selected.role}}
    </ui-select-match> 
    <ui-select-choices
       repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
       <span data-ng-bind="role.role"></span>
    </ui-select-choices>
</ui-select>

我可以在ui-select-match中添加allow-clear = true