http响应后填充角度js选择列表

Question

I have a select list that needs to default to a certain value based on an object from an http response:

<select ng-model="isRentVals.cur" ng-options="v for v in isRentVals.values"></select>

The object from the response is called my_property:

function editPropController($scope, $http) {
    $scope.my_property;

    $http.get('/api/propertyById/' + $scope.prop_id)
        .success(function(properties) {
            $scope.my_property = properties[0];
            $scope.isRentVals = { "cur" : $scope.my_property.is_rented, "values" : ["true", "false"]};
        })
        .error(function(err) {
            alert('We got an error: ' + err);
        });

The response from the $http call will come after the select element is bound to isRentVals.cur. isRentVals is not defined yet (will be defined in in the success callback in some milliseconds later) angular inserts an empty val then binds. How can I work around this?

The value is defaulted to blank and I have to reset my_property.is_rented in an ng_click method to save the new values.

Answer 1

The response for your $http call will come after your select element is bound to isRentVals.cur. Because isRentVals is not defined yet (will be defined in in your success call back in some milliseconds later) then angular insert an empty item to your select element to be able to bind to current value of isRentVals.cur. Also for better answers you should create a plunker.

Answer 2

Initialize isRentVals like this:

$scope.isRentVals = {}; //initialize as object

and overwrite the model when the data loaded:

function editPropController($scope, $http) {
$scope.my_property;
$scope.isRentVals = {};

$http.get('/api/propertyById/' + $scope.prop_id)
    .success(function(properties) {
        $scope.my_property = properties[0];
        $scope.isRentVals = { "cur" : $scope.my_property.is_rented, "values" : ["true", "false"]};
    })
    .error(function(err) {
        alert('We got an error: ' + err);
    });