1

I want to create a dropdown list in AngularJS from a JSON file.
How do I add a header for similar list items in my dropdown?
For example:

Malaysia (add the header here)
--sunway
--subang
--petaling jaya
--shah alam
--Klang
--Subang Jaya
--Setia alam
--sunway lagoon

Japan (add the header here)
--tokyo
--osaka
--kyoto
--shinsabashi
--shinagawa

1
  • Can you provide some code please?
    – katmanco
    Oct 26, 2015 at 10:51

4 Answers 4

1

Presuming your json looks something like this

$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}
        ]
    }
]

this should work:

<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>

EDIT

demo: http://jsfiddle.net/jkrielaars/5wg9ejzg/

1

One approach is to use the group by clause in the ng-options directive

The Demo

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>

1

I had a similar requirement. And this is how I did it :

Create two lists each to store the places, one for Malaysia and the other for Japan. In this case, say it is : vm.malaysia.list and 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>

See : How to display sections within a select dropdown using anularjs?

0

I am giving the sample code like

<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>

and I am attaching the link to read about Dropdown's http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Also here is the live running code for Dropdown Header link

1
  • 1
    The live running code uses jQuery and does not work with the AngularJS framework. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.
    – georgeawg
    Jun 24, 2018 at 22:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.