eНажмите, чтобы создать раскрывающийся список (сгруппированный), используя ng-options?

У меня есть json из всех стран со мной.eНажмите, чтобы создать раскрывающийся список (сгруппированный), используя ng-options?

{"countries":[ 
{"name":"Afghanistan","code":"AF"}, 
{"name":"Åland Islands","code":"AX"}, 
{"name":"United States","code":"US"}, 
{"name":"Canada","code":"CA"}, 
{"name":"India","code":"IN"} 
]};

Я хочу, чтобы создать раскрывающийся как

" 
Choose Country(Default) 
United States 
Canada 
------------ 
Åland Islands 
Afghanistan 
India 
So on..."

I может быть достигнуто с помощью нг-повтора как

<select name="country" id="country" data-ng-model="country" required data-ng-change="allSelect()"> 
    <option value="default" data-ng-data-ng-bind="'Choose Country'"></option> 
    <option value="{{cList.code}}" data-ng-if="cList.code === 'US'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option> 
    <option value="{{cList.code}}" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option> 
    <option value="default1">--------------------------------------------------</option> 
    <option value="{{cList.code}}" data-ng-if="cList.code !== 'US' && cList.code !== 'CA'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option> 
</select>

Как я могу сделать такие же через нг-варианты?

В настоящее время, если я хочу выбрать любую опцию по умолчанию, не происходит ее создания пустой строки. Список стран и значения по умолчанию, которые я получаю от разных вызовов ajax.

источник

2016-12-02 Kunal Vashist

Вам необходимо внести некоторые изменения в свой формат JSON

JSON

{ 
    "Collections": [{ 
    "Name": "North America", 
    "Countries": [{ 
     "Name": "United States", 
     "code": "US" 
     }, { 
     "Name": "Canada", 
     "code": "CA" 
     } 

    ] 
    }, { 
    "Name": "Asia", 
    "Countries": [{ 
     "Name": "India", 
     "value": "IN" 
     } 

    ] 
    }] 

}

HTML

<body ng-controller="dobController"> 
    <div class="col-md-20"> 
    <div id="main"> 
     <form class="form-horizontal" role="form"> 
     <label class="control-label col-md-2">Filter List:</label> 
     <div class="col-md-5"> 
      <select ng-model='theModel' ng-change="display(theModel)"> 
      <optgroup ng-repeat='group in collection' label="{{group.Name}}"> 
       <option ng-repeat='veh in group.Countries' value='{{group.Name}}::{{veh.Name}}'>{{veh.Name}}</option> 
      </optgroup> 
      </select> 
     </div> 
     </form> 
    </div> 
    </div>

контроллер

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.display = function(name) { 
     alert(name.split("::")[0] + "." + name.split("::")[1]); 
    } 
    } 
]);

DEMO

источник

2016-12-02 05:57:09 Sajeetharan

Json исходит от третьей стороны, я не буду в состоянии делать какие-либо изменения в этом –

С JSON вы показали выше, это невозможно, если вы не измените – Sajeetharan

eНажмите, чтобы создать раскрывающийся список (сгруппированный), используя ng-options?

ответ

Смежные вопросы