从服务返回数据时的默认 angularjs ng-option

Question

到目前为止，我看到的正常解决方案都没有奏效。我的控制器从服务返回选项列表并填充选择元素没有任何问题，但我无法设置默认值。我最接近的返回错误：Cannot read property '0' of undefined，代码为$scope.new_account.account_type = $scope.new_account.account_type[0];。有了这个错误，我认为对象还没有准备好，所以我使用了一个解析来返回我的服务数据。

.when('/accounts/new/', {
    controller: function ($scope, accountTypes) {
        $scope.accountTypes = accountTypes;
        $scope.new_account.account_type = accountTypes[0];
    },
    resolve: {
        accountTypes: function (AccountService) {
            return AccountService.getAccountTypes();
        }
    }
})

但这与类似的解决方案并没有产生任何影响。选择元素被填充，但默认选项为空白。我宁愿设置一个默认选项，而不是使用带有? 值的“请选择”默认值。

我也试过

controller: function ($scope, AccountService) {
    $scope.accountTypes = AccountService.getAccountTypes();
}

通过 $scope 和 ng-init 的各种实现...

<select ng-model="new_account.account_type" ng-options="type.id as type.name for type in accountTypes" 
    ng-init="new_account.account_type='General'">

    ng-init="new_account.account_type.name='General'">

    ng-init="new_account.account_type=0">

有什么想法可以帮助为此设置默认值吗？

根据要求，accountTypes 返回[{"id":1, "name":"General"}, {"id":2, "name":"Super"}, {"id":3, "name":"Trial"}

Answer 1

试试这个方法：

HTML

<div ng-controller="fessCntrl">
    <select ng-model="selectedItem" ng-options="selectedItem.name as selectedItem.name for selectedItem in values"></select>selectedItem: {{selectedItem}}
</div>

JS

var fessmodule = angular.module('myModule', ['ngResource']);

fessmodule.controller('fessCntrl', function ($scope, Data, $timeout) {
    Data.loadData().then(function (result) {

        $timeout(function () {
            $scope.values = result;
            $scope.selectedItem = $scope.values[0].name;
        }, 2000); // dummy, to simulate delay 
    },

    function (result) {
        alert("Error: No data returned");
    });
});
fessmodule.$inject = ['$scope', 'Data', '$timeout'];


fessmodule.service('Data', ['$resource', '$q', function ($resource, $q) {
    this.values = [{
        "id": 1,
            "name": "General"
    }, {
        "id": 2,
            "name": "Super"
    }, {
        "id": 3,
            "name": "Trial"
    }];

     this.loadData = function() {
     this.deferred = $q.defer();
     this.deferred.resolve(this.values);

      return this.deferred.promise;
    };   
}]);

演示Fiddle

听起来你有问题AccountService。上面带有服务的代码是有效的

但是，如果我这样写服务：

fessmodule.service('Data', ['$resource', '$q', function ($resource, $q) {
    this.values = [{
        "id": 1,
            "name": "General"
    }, {
        "id": 2,
            "name": "Super"
    }, {
        "id": 3,
            "name": "Trial"
    }];


    this.factory = {
        loadData: function (selectedSubject) {
            this.deferred = $q.defer();
            this.deferred.resolve(this.values);

            return this.deferred.promise;
        }
    }
    return this.factory;
}]);

我收到错误：TypeError: Cannot read property '0' of undefinedFiddle

Answer 2

我猜你的AccountService.getAccountTypes() 会根据你的控制器代码返回一个承诺。因此，您需要等到 promise 解决后再设置默认值。没有看到 AccountService 的确切代码，我无法给出确切的答案，但我会尽我所能。

首先，忘记resolve: 位，只需在控制器中执行 GET，如下所示：

controller: function ($scope, AccountService) {
    // if your getAccountTypes accepts a success callback, do this:
    $scope.accountTypes = AccountService.getAccountTypes(function(){
        $scope.new_account.account_type = $scope.accountTypes[0];
    });
    // and if it doesn't accept a callback, do this:
    $scope.accountTypes = AccountService.getAccountTypes();
    $scope.$watch('accountTypes', function(newValue){
         if(newValue && newValue.length){
             $scope.new_account.account_type = newValue[0];
         }
    });
    // (but obviously you shouldn't need both of the above options, just one or the other)
}

希望这有意义并解决您的问题。