2

到目前为止，我所看到的正常解决方案都没有奏效。我的控制器从服务返回选项列表并填充选择元素没有任何问题，但我无法设置默认值。最接近我的返回错误：Cannot read property '0' of undefinedwith the code $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"}

4

2 回答 2

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 undefined 小提琴

于 2013-10-16T14:15:47.790 回答
0

我猜你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)
}

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

于 2013-10-16T14:25:13.050 回答