Angularjsで選択されたoptgroup値を取得するには？

Question

私のアプリケーションでは、選択したオプトグループの値を選択ドロップダウンで取得します。

ここ

コード

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

必要な出力： 私はコレクションの1の下にフィールド1を選択した場合、私は私のようにグループと値の参照を保持するためのオプションに値を更新したCollection1.Field1

Answer 1

を必要とし、選択したOPTGROUP値を表示したいですよくグループ内の値が一意であれば、コントローラ変数内のマップをグループ化するための値を使用して、そこからデータを取得できました。しかし、同じ値がグループに存在するので、私はopt値でグループの参照を保持し、それを使用しています。

ここで、選択ボックスに表示されたテキストが必要なもので、グループの参照を保持するためにオプションの値が更新されました。だから、どちらも現在利用可能です。

更新Plunkr：https://plnkr.co/edit/zvNcdDe0kmMJ1R67hOkK?p=preview

コントローラー：

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>