Angularjs Default Select Selected Value

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; e.g. 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; e.g. [{'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.

Can we see example userData? Where is typeOptions coming from? We need a little more information, its pretty vague currently. — Dylan Watt
– Dylan Watt, Commented Jul 19, 2015 at 16:50
Once the page is reloaded, the angular app will reinitialize so it wont be having the previously selected value, you might have to save the value in localstorage/cookie when the user selects it and then on page load get that value and update the selection — hussainb
– hussainb, Commented Jul 19, 2015 at 17:27

soaP · Accepted Answer · 2015-07-19 21:24:16Z

2

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

edited Jul 19, 2015 at 21:24

answered Jul 19, 2015 at 17:51

soaP

1015 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cole · Accepted Answer · 2015-07-19 19:34:17Z

0

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>

answered Jul 19, 2015 at 19:34

Cole

1491 silver badge13 bronze badges

Collectives™ on Stack Overflow

Angularjs Default Select Selected Value

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related