将 ui-select 与 Angularjs 和 ajax 值一起使用答案

【问题标题】：Use of ui-select with Angularjs and ajax values将 ui-select 与 Angularjs 和 ajax 值一起使用
【发布时间】：2016-05-19 16:15:38
【问题描述】：

我正在尝试从 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）它与引导主题有相同的问题。

【问题讨论】：

是否有任何控制台错误？
不，没有错误。如果我使用 role.idRole 作为 role.role 像 select2 我收到错误

标签： javascript jquery angularjs select ui-select

【解决方案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

【讨论】：