CODEWITHSUNDEEP
angularjsng-options
Oceanus Teo
Oceanus Teo

Reputation: 11

How to add a header in dropdown list (with ng-options Demo)

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

Upvotes: 1

Views: 5361

Answers (4)

Praveesh P
Praveesh P

Reputation: 1449

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?

Upvotes: 1

georgeawg
georgeawg

Reputation: 48968

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>

Upvotes: 1

JasperZelf
JasperZelf

Reputation: 2844

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/

Upvotes: 1

SakthiSureshAnand
SakthiSureshAnand

Reputation: 1362

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

Upvotes: 0

Related Questions