Изменение выбранного параметра после HTTP-запроса.угловатый

Question

Используя angular, я понимаю, что вы можете выбрать опцию, присвоив значение модели.

$scope.options = optionArray[0];

Это также возможно после запроса ajax / http.

$scope.onChange = function(id) {
    $http.get('/API/GetJSONFor?id=' + id)
        .then(function (response) {
            $scope.optionArray = response.data;
            $scope.options = response.data[0].Value;
        });
}

Однако, если значение в response.data [0] отсутствует в параметре optionArray pre reassignment.Angular прикрепит его грубую нулевую опцию и установит ее в выбранныйЕсть ли работа вокруг этого?Эта нулевая опция до сих пор была одной из самых отягчающих в работе с angular.

EDIT

<select class="form-control" name="Options" id="Options" ng-model="options" ng-change="onChange(options)">
    <option ng-repeat="option in optionsArray" value="{{option.Value}}">{{option.Text}}</option>
</select>

Answer 1

Используйте ngOptions, а не ngRepeat над элементом option:

<select 
    class="form-control" 
    name="Options" 
    id="Options" 
    ng-model="options" 
    ng-change="onChange(options)" 
    ng-options="option.Value as option.Text for option in optionsArray">
</select>

И поскольку ваша модель установлена ​​в свойство .Value, когда вы хотите назначить, вам нужноприсвоить свойство .Value обратно модели:

$scope.onChange = function(id) {
    $http.get('/API/GetJSONFor?id=' + id).then(function (response) {
        $scope.optionArray = response.data;
        $scope.options = response.data[0].Value;
    });
}