CODEWITHSUNDEEP
angularjsng-optionsangularjs-ng-options
Kunal Vashist
Kunal Vashist

Reputation: 2471

eHow to create drop down (grouped) using ng-options?

I have json of all countries with me.

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

I want to create drop down like

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

I can be achieved via ng-repeat like

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

How can i do same via ng-options?

Currently if i want to select any option by default is not happening its creating blank string. Country list and default values i am getting from different ajax call.

Upvotes: 0

Views: 276

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222692

You need to make some changes to your 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>

Controller

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

Upvotes: 2

Related Questions