I have an html list:
Basically what I am trying to do is to show this box with a list in it and the user can select multiple ones then I save it. The saving and retrieving works. The selectedList gets populated with the items user selected last time while the fullList is the entire list of choices. I want to be able to HIGHLIGHT those rows of selected choices when the data gets loaded as if restoring from the last state. I can't seem to get it to highlight/select... I searched online and haven't found anything that is similar to what I have... some help would be appreciated! Thanks!
I have an html list:
Basically what I am trying to do is to show this box with a list in it and the user can select multiple ones then I save it. The saving and retrieving works. The selectedList gets populated with the items user selected last time while the fullList is the entire list of choices. I want to be able to HIGHLIGHT those rows of selected choices when the data gets loaded as if restoring from the last state. I can't seem to get it to highlight/select... I searched online and haven't found anything that is similar to what I have... some help would be appreciated! Thanks!
Share Improve this question asked Feb 18, 2015 at 22:52 user4347600user4347600 2- Could you post your HTML? Do you have a model attached to the select field? – Atav32 Commented Feb 18, 2015 at 23:05
- <html> <div> <select ng-model="selectedList" ng-options=" item.value for item in fullList.values" multiple </select> </div> </html> – user4347600 Commented Feb 19, 2015 at 0:19
2 Answers
Reset to default 6If you are talking about the default browser multiselect using ng-model and ng-options, you probably just made a mon mistake.
HTML for default multiselect:
<select multiple ng-model="selectedOptions" ng-options="option.value as option.label for option in optionList"></select>
Make sure you do not forget option.value as. Without it a multiselect will not preselect your selected options.
optionList:
$scope.optionList = [
{'value':0, label :'Option 1'},
{'value':1, label :'Option 2'},
{'value':2, label :'Option 3'},
{'value':3, label :'Option 4'},
{'value':4, label :'Option 5'},
{'value':5, label :'Option 6'},
{'value':6, label :'Option 7'},
{'value':7, label :'Option 8'}
];
selectedOptions:
$scope.selectedOptions= [2,5];
Your selections will not be selected in a multi select box when you use an object array for your selectedOptions like this:
$scope.selectedOptions= [
{'value':2, label :'Option 3'},
{'value':5, label :'Option 6'}
];
Why? Because the option.value as refers to the option.value value which is not, for example, {'value':2, label :'Option 3'} but 2.
Should you think to replace option.value as to option as and use the second selectedOptions list, because then it would be, for example, {'value':2, label :'Option 3'}. It will not work.
For some reason the multiselect can't handle object arrays in the ng-model or it can't handle an object for the option.value as in the ng-options for an initial selection... Why, I am not sure.
Conclusion:
- A multi select requires the option.value reference
- Use a simple array for your selectedOptions while keeping the reference in mind
Hope this helps.
Since you want to select multiple items out of list, you'll probably want to use a plugin.
https://github./isteven/angular-multi-select
or
https://github./amitava82/angular-multiselect
or
https://github./dotansimha/angularjs-dropdown-multiselect
To preselect several options, just bind the select field to a model and initialize that model with values.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745259003a4619122.html
评论列表（0条）