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

但它不起作用，我只看到空的 select，没有找到任何元素。但奇怪的是，对于 bootstrap 主题，如果我看不到 I select，我也会看到价值。你能帮帮我吗？

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

Answer 1

我切换到 bootstrap 并且我使用了这个代码：

<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

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

Use of ui-select with Angularjs and ajax values

javascript

jquery

angularjs

select

ui-select