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（）调用back end并使用对象数组填充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（＆＃39; refresh＆＃39;）。

<强>更新：在调用selectpicker（＆＃39; refresh＆＃39;）之前，还需要使用$ 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＆amp; Plunk的分支，以了解此情况。

更新2 ：请使用超时来阻止正在进行的＆＃34;摘要＆＃34;错误：

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

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

Answer 2

This plunk包含您提供的确切代码，但bootstrap-dropdown指令和您的实际网络服务除外。代码按预期运行。这表明您未提供的代码中存在其他问题。

可能的问题：

~~bootstrap-dropdown指令正在做一些有趣的事情。~~

一个。更新：该指令有效＆＃34;罚款＆＃34;在this plunk。不确定它应该做什么，但它不会导致你描述的行为。
您的标记中缺少ng-controller。
我们无法看到的是清除$ scope.commandGroups。

Answer 3

重新分配$ scope.commandGroups可能会干扰promise promise / scope digest循环。尝试将功能更改为以下内容：

"".to_f #=> 0.0

数组没有绑定到使用AngularJs选择

3 个答案: