CODEWITHSUNDEEP
angularjs
Sergey Kudryashov
Sergey Kudryashov

Reputation: 721

AngularJS select list with optgroups with selected item with combined label

I need to make grouped list with good value and label. Label should be combined by label + value. Also one item should 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: values are not correct, they are 0,1,2, and I expected 123, 234, 345

2: labels should be "A 123", "B 234", "C 345"

  1. no selected item...

So I recieve 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 for 

<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 with jQuery. So I very need good values in options.

Here is updated fiddle with submit http://jsfiddle.net/uwozaof9/2/

Upvotes: 3

Views: 7337

Answers (2)

dhavalcengg
dhavalcengg

Reputation: 4713

Forked your fiddle

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 set your model.

More more information check https://docs.angularjs.org/api/ng/directive/ngOptions.

Using select as will bind the result of the select expression to the model, but the value of the and html elements will be either the index (for array data sources) or property name (for object data sources) of the value within the collection. If a track by expression is used, the result of that expression will be set as the value of the option and select elements.

Upvotes: 7

Sergey Kudryashov
Sergey Kudryashov

Reputation: 721

Temporary I made a hook with hidden input

This is 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());
        }
}

http://jsfiddle.net/uwozaof9/4/

Upvotes: 3

Related Questions