admin管理员组文章数量:1417070
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.
本文标签： javascriptHow to preselect multiple rows on ngoptions in a listStack Overflow
版权声明：本文标题：javascript - How to preselect multiple rows on ng-options in a list - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745259002a2650267.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论