Angular.js默认选择所选值

Question

I generate a table using ng-repeat that loops over user submitted data. Inside of the ng-repeat I have a field, a select, that I use another ng-repeat to build a list of types. This too generates the appropriate select. However, I cannot figure out how to have the select defaulted to the users's value; eg User selects book as the type, when the user reloads the page I want the select to have "book" preselected.

<tr ng-repeat="item in userData" ng-include="'templates/bookmarkrow.html'"></tr>
...
<select ng-model="item.type" ng-options="option.name for option in typeOptions track by option.value" class="form-control hidden"></select>

I thought the ng-model would bind the select to the value of item.type. Any ideas?

Additional Details

typeOptions is an array of objects; eg [{'name': 'some name', 'value': 'some value', ...}]. As for the data, I'm aware that AngularJS doesn't store the data. Assume in this example that data is coming from a data store; be it database or local storage. The larger point is I will have loaded data in the client side and want to indicate it in the select.

Answer 1

Since angular does not persist data across page reloads the data will be lost when a full reload occurs. If you are using angular routes or ui-router then you can persist data in factories which are singletons.

To save data across page reloads you can (as mentioned) use local storage, cookies or store it the in the backend of your application.

To just initialize a value you can use ng-init

Answer 2

I rewrote my code to use ng-repeat on the option, instead of using ng-options on the select. After that I used ng-selected on the option to decide which option is selected.

<select class="form-control hidden">
    <option selected-value="{{option.value}}" ng-selected="{{item.type == option.value}}" ng-repeat="option in typeOptions">{{option.name}}</option>
</select>