在ng-options（AngularJS）中选择第一个选项

Question

我正在仅使用ng-options来工作Group和subGroup。

哪里，第一个下拉显示组

然后选择下拉列表，显示组内的子选项。

当我在组下拉列表中选择任何组时。第二个下拉列表未选择默认的第一个选项。

JS：

var app = angular.module("md", [])
         .controller("crt", function ($scope) {
             $scope.items = [{
                 id: 1,
                 label: 'aLabel',
                 dis: false,
                 group: "B",
                 subItem: { name: 'aSubItem' }
             }, {
                 id: 2,
                 label: 'bLabel',
                 dis: true,
                 group: "B",
                 subItem: { name: 'bSubItem' }
             },
             {
                 id: 3,
                 label: 'cLabel',
                 dis: false,
                 group: "B",
                 subItem: { name: 'cSubItem' }
             }, {
                 id: 4,
                 label: 'dLabel',
                 dis: true,
                 group: "B",
                 subItem: { name: 'dSubItem' }
             }, {
                 id: 5,
                 label: 'eLabel',
                 dis: false,
                 group: "A",
                 subItem: { name: 'eSubItem' }
             }, {
                 id: 6,
                 label: 'fLabel',
                 dis: true,
                 group: "B",
                 subItem: { name: 'fSubItem' }
             }, {
                 id: 7,
                 label: 'gLabel',
                 dis: false,
                 group: "A",
                 subItem: { name: 'gSubItem' }
             }, {
                 id: 8,
                 label: 'hLabel',
                 dis: true,
                 group: "A",
                 subItem: { name: 'hSubItem' }
             }, {
                 id: 9,
                 label: 'iLabel',
                 dis: false,
                 group: "B",
                 subItem: { name: 'iSubItem' }
             }, {
                 id: 10,
                 label: 'jLabel',
                 dis: true,
                 group: "A",
                 subItem: { name: 'jSubItem' }
             }];
             $scope.opt = $scope.items[0];
             $scope.serach = $scope.items[0];
         });
        app.filter('unique', function () {
            return function (input, key) {
                var unique = {};
                var uniqueList = [];
                for (var i = 0; i < input.length; i++) {
                    if (typeof unique[input[i][key]] == "undefined") {
                        unique[input[i][key]] = "";
                        uniqueList.push(input[i]);
                    }
                }
                return uniqueList;
            };
        });

HTML：

Select the group:<br />
    <select ng-model="serach" ng-options="i as i.group for i in items | unique:'group' | orderBy : 'group' track by i.group">
        <option value="">Select ALL</option>
    </select><br />
    SubGroup:<br />
    <label ><input type="checkbox" name="name" ng-model="reverse" />reverse me</label>
    <select ng-model="opt" ng-options="i.label group by i.group for i in items  | orderBy:reverse ?'group':'-group' | filter :serach.group:true track by i.subItem.name">
        <!--<option selected="selected">Please Select</option>-->
    </select>

提琴手在这里

Answer 1

我认为在组选择框中添加ng-change事件将为您工作。 您只需要在ng-change事件中设置以下代码。

$scope.opt = $scope.search

https://jsfiddle.net/6se2atu5/7/

Answer 2

您可以使用 ：

$scope.opt = $scope.serach == null ? $scope.items[0] : $scope.serach;

提琴手