Я хочу создать раскрывающийся список в AngularJS из файла JSON.
Как добавить заголовок для похожих элементов списка в раскрывающемся списке?
Например:
Малайзия (добавьте сюда заголовок)
--sunway
--subang
--petaling jaya
--shah alam
--Klang
--Subang Jaya
- -Setia alam
--sunway lagoon
Япония (добавьте сюда заголовок)
--tokyo
--osaka
--kyoto
--shinsabashi
--shinagawa
Предполагая, что ваш json выглядит примерно так
$scope.dropdown = [
{
name:'Malaysia',
items: [
{name: 'sunway', value: 1},
{name: 'subang', value: 2},
{name: 'petaling jaya', value: 3}
]
},
{
name:'Japan',
items: [
{name: 'tokyo', value: 4},
{name: 'osaka', value: 5},
{name: 'kyoto', value: 6}
]
}
]
это должно работать:
<select>
<optgroup ng-repeat="header in dropdown" label="{{ header.name }}">
<option ng-repeat="item in header.items" value="{{ item.value }}">{{ item.name }}</option>
</optgroup>
</select>
ИЗМЕНИТЬ
демо: http://jsfiddle.net/jkrielaars/5wg9ejzg/
Один из подходов заключается в использовании предложения group by в ng-options директива
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.selection = null;
$scope.options = [
{country: 'Malaysia', name: 'sunway', value: 1},
{country: 'Malaysia', name: 'petaling jaya', value: 3},
{country: 'Japan', name: 'tokyo', value: 4},
{country: 'Japan', name: 'osaka', value: 5},
{country: 'Japan', name: 'kyoto', value: 6},
{country: 'Malaysia', name: 'subang', value: 2},
];
})<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<pre>Selected value={{selection}}</pre>
<br>
<select ng-model="selection"
ng-options="opt.value as opt.name group by opt.country
for opt in options">
<option value="" disabled>Select City</option>
</select>
</body>У меня было подобное требование. И вот как я это сделал:
Создайте два списка для хранения мест, один для Малайзии, а другой для Японии. В этом случае скажем, что это: vm.malaysia.list и vm.japan.list:
<select
ng-model="yourmodelName" >
<option value="">Please select</option>
<optgroup label="Malaysia">
<option ng-repeat="place in vm.malaysia.list" ng-value="place">{{place}}</option>
</optgroup>
<optgroup label="Japan">
<option ng-repeat="place in vm.japan.list" ng-value="place">{{place}}
</option>
</optgroup>
</select>
См.: Как отобразить разделы в раскрывающемся списке выбора с помощью anularjs. ?
Я даю пример кода, например
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">{{xx-Dropdown header 1-xx}}</li>
<li><a href="#">{{xx}}</a></li>
<li class="divider"></li>
<li class="dropdown-header">{{xx-Dropdown header 2-xx}}</li>
<li><a href="#">{{yy}}</a></li>
</ul>
</div>
</div>
и я прилагаю ссылку, чтобы прочитать о http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
Также здесь приведен рабочий код для ссылки на выпадающий заголовок
