Wie wird der Opt-Group-Wert in Angularjs ausgewählt?

Question

Mit meiner Anwendung möchte ich den ausgewählten optgroup-Wert in einem Dropdown-Menü auswählen. Hier

ist der 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

Ausgabe erforderlich: ich den ausgewählten optgroup Wert angezeigt werden soll, wenn ich Field1 unter Collection 1 wählen, ich brauche Collection1.Field1

Answer 1

Ich habe die Werte in Optionen aktualisiert, um eine Referenz von Gruppe zu halten und Werten Gut. Wenn die Werte in Gruppen eindeutig wären, hätten wir einen Wert verwenden können, um die Zuordnung in der Controller-Variablen zu gruppieren, und hätten dann Daten von dort. Aber da die gleichen Werte in der Gruppe liegen, habe ich eine Referenz der Gruppe in opt-Werten behalten und diese verwendet.

Jetzt Text in Auswahlfeld angezeigt wird, was gewünscht wird und die Werte der Optionen aktualisiert werden eine Referenz der Gruppe zu halten. Beide sind jetzt verfügbar.

Aktualisiert 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>