CODEWITHSUNDEEP
javascriptangularjsselectng-options
Sajeetharan
Sajeetharan

Reputation: 222692

How to get selected optgroup value in Angularjs?

With my application, i want to get the selected optgroup value in an select dropdown.

Here is the code

HTML:

<select ng-model='theModel'   ng-change="display(theModel)" >
        <optgroup ng-repeat='group in collection' label="{{group.Name}}">
        <option ng-repeat='veh in group.Fields'>{{veh.Name}}</option>
        </optgroup>
</select>

Controlelr:

$scope.display = function(name) {
       alert(name); // i want to get the selected value and the optgroup value
}

DEMO APP

OUTPUT REQUIRED: I want to display the selected optgroup value , if i select Field1 under Collection 1, i need Collection1.Field1

Upvotes: 2

Views: 2908

Answers (1)

abhinsit
abhinsit

Reputation: 3272

I have updated the values in options to keep a reference of group and values as well. If the values in groups would have been unique then we could have used a value to group map in controller variable and would have got any data from there. But since same values reside in group, i have kept a reference of group in opt values and have used that.

Now text shown in select box is what is desired and values of options are updated to keep a reference of group. So both are available now.

Updated Plunkr: https://plnkr.co/edit/zvNcdDe0kmMJ1R67hOkK?p=preview

Controller:

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope", "$http",
  function($scope, $http) {
    $http.get('test.json').then(function(response) {
      $scope.collection = response.data.Collections;
      console.log(response);
    });

    $scope.matches = [];

    $scope.display = function(name) {

       alert("controller:"+name.split("::")[0]+" and value ::"+name.split("::")[1] );
    }

  }
]);

HTML:

<select ng-model='theModel' ng-change="display(theModel)">
    <optgroup ng-repeat='group in collection' label="{{group.Name}}">
    <option ng-repeat='veh in group.Fields' value='{{group.Name}}::{{veh.Name}}'>{{veh.Name}}</option>
    </optgroup>
    </select>

Upvotes: 4

Related Questions