javascript - 数组未绑定(bind)到使用 AngularJs 选择

Question

我正在像这样填充一个名为 CommandGroup 的集合

        function getCommandGroups() {
        $scope.commandGroups = commandGroupResource.query();

        return $scope.commandGroups.$promise.then(function (response) {

            $scope.commandGroups = response;

        });

    }

我的 html 看起来像这样。

                        <select ng-model="vm.Job.CommandGroup" name="ddlCommandGroup" bootstrap-dropdown>
                        <option value="">Select Something</option>
                        <option ng-repeat="cmdGroup in commandGroups" value="{{cmdGroup.Id}}">{{cmdGroup.Name}}</option>
                    </select>

由于某种原因，下拉菜单仍然是空的。函数 getCommandGroups() 调用后端并使用对象数组填充 commandGroups，每个对象都有 Id 和 Name。

请帮忙。

更新

我发现指令 bootstrap-dropdown 有问题，因为它是 Bootstrap-select

angular
.module('app').directive('bootstrapDropdown', ['$timeout',
    function ($timeout) {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModel) {                  
                $timeout(function () {
                    element.selectpicker();
                });
            }
        };
    }
]);

Answer 1

我认为问题在于第三方 JavaScript (bootstrap-select) 没有收到有关更改的通知。 将响应分配给 commandGroups 后，您可能必须在元素上调用 selectpicker('refresh')。

更新: 在调用 selectpicker('refresh') 之前还需要使用 $scope.$apply():

function getCommandGroups() {
    $scope.commandGroups = commandGroupResource.query();

    return $scope.commandGroups.$promise.then(function (response) {
        $scope.commandGroups = response;
        $scope.$apply();
        $('.mySelect').selectpicker('refresh'); 
    });
}

请参阅下面有关 Taylor Buchanan 的 Plunk 分支的评论，了解其实际效果。

更新 2:使用超时来防止“摘要已在进行中”错误:

function getCommandGroups() {
   $scope.commandGroups = commandGroupResource.query();

   return $scope.commandGroups.$promise.then(function (response) {
        $scope.commandGroups = response;
        $timeout(
           function(){
               $('.mySelect').selectpicker('refresh'); 
           }
        );
   });
}