AngularJS select list with optgroups with combo label selected item
I need to group a list with good value and label. The label must be concatenated by sign + value. One item must also be selected.
My code
<div ng-controller="MyCtrl">
<select ng-model="selectedVal" ng-options="v.label as v.number group by v.group for v in list">
</select>
</div>
var myApp = angular.module ('myApp', []);
function MyCtrl($scope) {
$scope.selectedVal = 234;
$scope.list = [
{
number: 123,
label: "A",
group: 'aa'},
{
number: 234,
label: "B",
group: 'aa'},
{
number: 345,
label: "C",
group: 'bb'},
];
}
http://jsfiddle.net/mn2nk6rb/2/
In my code: 1: the values are wrong, they are 0,1,2 and I was expecting 123, 234, 345
2: labels should be "A 123", "B 234", "C 345"
- no item selected ...
So I am getting this code
<select ng-model="selectedVal" ng-options="v.label as v.number group by v.group for v in list" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<optgroup label="aa">
<option value="0">123</option>
<option value="1">234</option>
</optgroup>
<optgroup label="bb">
<option value="2">345</option>
</optgroup>
</select>
And i expect
<select ng-model="selectedVal" ng-options="v.label as v.number group by v.group for v in list" class="ng-pristine ng-valid">
<optgroup label="aa">
<option value="123">A 123</option>
<option value="234" selected>B 234</option>
</optgroup>
<optgroup label="bb">
<option value="345">C 345</option>
</optgroup>
</select>
Please, help!
UPD: Also I need to serialize my form using jQuery. Therefore, I really need good values in the settings.
Here's the fiddle update with submit http://jsfiddle.net/uwozaof9/2/
source to share
Hid the violin
http://jsfiddle.net/uwozaof9/1/
<div ng-controller="MyCtrl">
<select ng-model="selectedVal" ng-options="v.number as (v.label + v.number) group by v.group for v in list">
</select>
{{selectedVal}}
</div>
if you want to serialize your form you can use track by option. Check
http://jsfiddle.net/uwozaof9/5/
but then you won't be able to install your model.
More information is checked at https://docs.angularjs.org/api/ng/directive/ngOptions .
Using select will both bind the result of the select statement to the model, but the element and html value will be either the index (for array data sources) or the property name (for object data sources) of the value within the collection. If a track expression is used, the result of that expression will be set as the value of the option and selections.
source to share
Temporary I made a hook with a hidden entrance
This is an example that works
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<form id="aaa" ng-controller="MyCtrl">
<input type="hidden" name="select" value="{{selectedVal}}">
<select ng-model="selectedVal" ng-options="v.number as (v.label + v.number) group by v.group for v in list">
</select>
{{selectedVal}}
<button ng-click="go()">go</button>
</form>
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $element) {
console.log($('form'))
$scope.selectedVal = 234;
$scope.list = [
{
number: 123,
label: "A",
group: 'aa'},
{
number: 234,
label: "B",
group: 'aa'},
{
number: 345,
label: "C",
group: 'bb'},
];
$scope.go = function(form){
console.log($('form#aaa').serializeArray());
}
}
source to share