如何在 Angularjs 中获取选定的 optgroup 值？

Question

对于我的应用程序，我想在 select 下拉列表中获取 selected optgroup 值。

这是代码

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>

控制器：

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

DEMO APP

需要输出： 我想显示 selected optgroup 值，如果我 select Collection 1 下的 Field1，我需要 Collection1.Field1

Answer 1

我更新了选项中的值，以保留对组和值的引用。如果组中的值是唯一的，那么我们可以使用一个值来对控制器变量中的映射进行分组，并从那里获取任何数据。但是由于相同的值存在于组中，我在 opt 值中保留了组的引用并使用了它。

现在 select 框中显示的文本是所需要的，选项的值已更新以保留组的引用。所以现在两者都可用。

已更新 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>

如何在 Angularjs 中获取选定的 optgroup 值？

How to get selected optgroup value in Angularjs?

javascript

angularjs

select

ng-options