角度默认选择选项

Question

I am having a problem getting my select to properly set the default option for my data. I am fetching data from a server through an Ajax call. I then want to be able to edit this data using a form. I want to point the select to use options set in a controller object but when you edit the select I want the model to point to the ajax data because that is what I write back to the server. As you can see in my plunkr each of the four items should have their select options filled in but instead all of the selects start empty.

In the official documentation for angular they say to do the following to set the default:

angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
  $scope.data = {
  availableOptions: [
    {id: '1', name: 'Option A'},
    {id: '2', name: 'Option B'},
    {id: '3', name: 'Option C'}
  ],
  selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
  };
}]);

//Then in the HTML file:
<select name="mySelect" id="mySelect"
  ng-options="option.name for option in data.availableOptions track by option.id"
  ng-model="data.selectedOption"></select>

In my case the options aren't in the ajax data however, only the currently selected option. So I want to manage available options via a controller object but bind the select to the ajax data. Thanks.

https://plnkr.co/edit/Q16QLT?p=preview

Answer 1

You should define which property of "option" you want to bind to:

<select ng-options="option.value as option.text for option in options" ng-model="item.select"></select>

Working demo https://plnkr.co/edit/BezGaYjykfQrFQ9nZop2?p=preview

Answer 2

将您的选择更改为此：

<select ng-options="option.text as option.text for option in options" ng-model="item.select"></select>

Answer 3

This will definately work:

Since your ng-model contains the full option object you need to bind it with the object in ng-options as well

<select name="mySelect" id="mySelect"
  ng-options="option as option.name for option in data.availableOptions track by option.id"
  ng-model="data.selectedOption"></select>