Default value of select option in the drop-down box of angularjs

Today, it is difficult to solve another angularjs problem. It took a lot of time to solve it.

Option ng-repeat multiple blank items

<Select class = "form-control" ng-model = "posts. website">
<Option value = "0"> select a website </option>
<Option ng-repeat = "row in list. websites" value = "{row. websites_id }}" >{{ row. websites_name }}</option>
</Select>
Please refer to the code above. ng-repeat found a blank option during the loop. The code parsed by chrome is

Chrome parsing error code

<Option value = "? Undefined: undefined? "> </Option>

Then I checked the value of the list. websites object. It seems that there is no problem.

And google it. I want to talk about Baidu's failure to find the result.
It is found that the value of posts. website is to be initialized, so use ng-init to initialize the value and change the code

<Select class = "form-control" ng-model = "posts. website" ng-init = "posts. website = '0'">
<Option value = "0"> select a website </option>
<Option ng-repeat = "row in list. websites" value = "{row. websites_id }}" >{{ row. websites_name }}</option>
</Select>

It's normal.

This article describes how to solve the problem of adding multiple page options.

On the modification page, I also installed this method to handle the problem, but it didn't work. If I attached a value to ng-model, I couldn't display the default value, and finally solved the problem with my own exploration.

Correct aspect

<Select ng-model = "posts. website "ng-options =" c. websites_id as c. websites_name for c in posts. websites "class =" form-control "ng-selected =" c. websites_id = posts. website ">
<Option value = ""> select a website </option>
</Select>

The code parsed by the browser is

<Select ng-model = "posts. website "ng-options =" c. websites_id as c. websites_name for c in posts. websites "class =" form-control ng-pristine ng-valid ng-touched "ng-selected =" c. websites_id = posts. website ">
<Option value = "" class = "" selected = "selected"> select a website </option>
<Option label = "fdsaffd" value = "number: 4"> fdsaffd </option>
<Option label = "fdsaffdsa" value = "number: 3"> fdsaffdsa </option>
<Option label = "fdsaf" value = "number: 2"> fdsaf </option>
<Option label = "Xiaosong blog" value = "number: 1" selected = "selected"> Xiaosong blog </option>
</Select>
The default "Xiaosong blog" has added the selected attribute.