在 AngularJS 中使用 optGroup 获取 selectedGroup

在 HTML 的 select 元素中，可以使用 optgroup 创建一个可折叠的 optgroup 分组。在 AngularJS 中，我们可以使用 ng-options 指令来动态生成 select 中的选项。在这个过程中，我们可以通过一些技巧来获取当前选中的 optgroup。

使用 ng-options

使用 ng-options 指令可以方便地生成 select 中的选项。例如，我们要生成一个选项列表，其中每个选项都包含一个 value 和一个 label：

<select ng-model="selectedValue"
        ng-options="option.value as option.label for option in options">
</select>

在这个例子中，ng-model 属性将绑定选择的值，ng-options 属性将生成选项列表，其中 options 是一个由 JavaScript 对象数组组成的数组。

optgroup 组合

要将选项分组，我们可以使用 optgroup 元素。对于每个 optgroup，应创建一个包含 label 和 options 属性的对象。label 属性是 optgroup 的名称，options 属性是一个数组，其中包含 value 和 label 属性的对象，以表示该组中的选项。

以下是使用 optgroup 的示例 HTML：

<select ng-model="selectedValue"
        ng-options="option.value as option.label group by option.group for option in options">
    <optgroup label="{{group}}">
        <option ng-repeat="option in group.options"
                value="{{option.value}}">{{option.label}}</option>
    </optgroup>
</select>

在这个示例中，我们使用了 ng-options 指令的 group by 功能来将选项分组。然后，我们在 optgroup 标记中使用 ng-repeat 来生成每个子选项。

获取选定的 optgroup

要获取当前选中的选项，我们可以使用 ng-model 属性，并在控制器中设置 selectedValue 变量。该变量将反映当前选中的 value 属性。

app.controller('myCtrl', function($scope) {
    $scope.options = [
        {value: '1', label: 'Group 1 - Option 1', group: 'Group 1'},
        {value: '2', label: 'Group 1 - Option 2', group: 'Group 1'},
        {value: '3', label: 'Group 2 - Option 1', group: 'Group 2'},
        {value: '4', label: 'Group 2 - Option 2', group: 'Group 2'}
    ];
    $scope.selectedValue = null;

    $scope.$watch('selectedValue', function(newValue, oldValue) {
        var option = $scope.options.find(function(opt) {
            return opt.value === newValue;
        });
        if (option) {
            console.log('Selected Group: ' + option.group);
        }
    });
});

在这个控制器中，我们将 options 数组和 selectedValue 变量注入了作用域。我们通过 $watch 监听 selectedValue 变量的变化，以便在变量更改时获取当前选中的 optgroup。我们使用 Array.prototype.find() 方法从 options 数组中查找选项对象，并将其分配给 option 变量。最后，我们将选定的 optgroup 输出到控制台。