Question

我在使用angularjs填充（下拉列表）时遇到以下错误。我是Angularjs的新手，并且无法在这里找出问题。

TypeError: Cannot call method 'insertBefore' of null
at file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:143:330
at r (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:7:332)
at r.after (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:143:305)
at Object.S.(anonymous function) [as after] (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:145:4)
at h [as $render] (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:201:442)
at Object.<anonymous> (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:182:22)
at g.$digest (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:102:56)
at g.$apply (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:105:7)
at h (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:68:175)
at B (file:///Users/{userName}/Library/Application%20Support/extensions/com.example.app/lib/angular.min.js:72:215)

这是我的html外观：

<select id="promoDropDown" ng-model="selectedItem" ng-options="promo as promo.promoId for promo in promoCollection"></select>

这是我的控制器方法看起来像。我使用$ http：

获取数据

var mainApp = angular.module("mainApp", []);

mainApp.controller（＆＃34; PromoList＆＃34;，[＆＃39; $ scope＆＃39;，＆＃39; $ http＆＃39;，＆＃39; modelSerivce＆＃39;，＆＃39; promoCollectionService＆＃39;，function（$ scope，$ http，modelSerivce，promoCollectionService）{ var serviceURL = modelSerivce.serviceURL（）;

serviceURL.then(function(configData) {  // this is only run after $http completes

    $http.post(SERVICE_URL + "GetPromoInfo", {enumPromoType:1, enumRequestSource:2}).
    success(function(data) {
        var promoCollectionData = promoCollectionService.getPromoCollection(data);
        promoCollectionData.then(function(promoCollection){
            $scope.promoCollection = promoCollection;
            $scope.selectedItem = $scope.promoCollection[0];

            $scope.removeSelectedSpreads = function(promoInfoObject){                    
                 angular.forEach(promoInfoObject.spreadList, function(spreadObject){
                     if(spreadObject.isSelected) spreadObject.isSelected = false;
                 });
                // promoInfoObject.allSelected = false;
            };

            $scope.promoChangeHandler = function(){

            };

        }, function(reason){alert("Failed in controller: " + reason);});
    }).
    error(function(data, status){
        $scope.data = data || "Request Failed";
        $scope.status = status;
        //console.log("Error: Unable to fetch info Data: "+ data + " status: "+status);
    });
});}]);

修改如果我用其他方式绑定数据，我不会收到此错误：

<select name="promoId" ng-model="selectedItem">
                    <option ng:repeat="promo in promoCollection" value="{{promo.promoId}}">{{promo.promoId}}</option>
                </select>

但是我在下拉列表中选择了空白项目。

更新：我部分解决了问题。我应该使用默认值来处理下拉列表中的空值。但我没有要求添加它。所以仍然需要在下拉列表中处理空值。这是我们如何避免上述错误：

<select id="promoDropDown" ng-model="selectedItem" ng-options="promo.promoId for promo in promoCollection">
                <option value="">-- choose promo date --</option>
            </select>

更新当我使用非缩小版角度时，问题得到了解决。我不确定导致此错误的原因。但它现在得到了解决。非常感谢。

在Angularjs中填充下拉列表时出错

0 个答案: