Выберите первый вариант в ng-options (AngularJS)

#html #angularjs

#HTML #angularjs

Вопрос:

Я работаю в группе и подгруппе, используя только ng-options..

Где, первые выпадающие группы отображения

и выберите выпадающий список, отображающий вспомогательный параметр внутри групп.

когда я выбираю любую группу в раскрывающемся списке group .. во втором раскрывающемся списке не выбирается первый вариант по умолчанию.

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>
 

Скрипач здесь

Комментарии:

1. Опубликованная вами скрипка пуста

2. Извините за это .. не все в порядке

Ответ №1:

Я думаю, что добавление события ng-change в поле выбора группы будет работать для вас. Вам нужно просто установить приведенный ниже код в событии ng-change.

 $scope.opt = $scope.search
 

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

Комментарии:

1. Спасибо, но когда я выбираю… «Выбрать ВСЕ» в выпадающем списке группы .. в выпадающем списке во вложении отображался пустой пробел..

2. @42Hck ответ правильный. Он обрабатывает нулевое условие

Ответ №2:

Вы можете использовать :

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

Скрипач