ng-options (key, values) in object

Question

I want to know how to use ng-options render a select Element works.

    var data = {
 china:[
{name:'shanghai',code:1},
{name:'zhejiang',code:2}
],
 us:[
{name:'Alabama',code:3},
{name:'Alaska',code:4}
]
};


than,will render like this

<select>
 <optgroup label="china">
     <option value="1">shanghai</option>
     <option value="2">zhejiang</option>
</optgroup>
 <optgroup label="us">
     <option value="3">Alabama</option>
     <option value="4">Alaska</option>
</optgroup>
</select>

use ng-options how to make it work?

Sudhir Ojha · Accepted Answer · 2018-05-23T09:36:33.607

1

Here is working code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<select>
 <optgroup label="{{key}}" ng-repeat="(key,value) in data">
     <option value="{{val.code}}" ng-repeat="val in value" ng-selected="{{val.code==defaultValue}}">{{val.name}}</option>
</optgroup>
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     $scope.defaultValue = "4"; // Any default value you want here
     $scope.data = {
 china:[
{name:'shanghai',code:1},
{name:'zhejiang',code:2}
],
 us:[
{name:'Alabama',code:3},
{name:'Alaska',code:4}
]
};
});
</script>

</body>
</html>

edited May 23 '18 at 09:36

answered May 23 '18 at 08:40

Sudhir Ojha

3,247
3
14
24

thanks, ng-repeat it is OK,I want to know how to use ng-options. bcz use ng-repeat can not bind default value – wangzhen May 23 '18 at 08:57
@wangzhen , you can use ng-selected in ng-repeat like this. by this you can bind default value to your model – Chiru Adi May 23 '18 at 09:27
@ChiruAdi what is defaultValue here. – Sudhir Ojha May 23 '18 at 09:32
$scope. defaultValue ="3"; // whatever want to bind from your repeating options – Chiru Adi May 23 '18 at 09:34
Yes got it . I will update my answer. – Sudhir Ojha May 23 '18 at 09:35
@wangzhen i have updated my answer. Let's have a look. – Sudhir Ojha May 23 '18 at 09:37

score 0 · Answer 2 · answered May 23 '18 at 09:30

0

First you need to change your object structure something like

const data = [
  {name: 'shanghai', code: 1, group: 'china'},
  {name: 'zhejiang', code: 2, group: 'china'},
  {name: 'Alabama', code: 1, group: 'us'},
  {name: 'Alaska', code: 2, group: 'us'}
]

And use in HTML to bind this object to select with ng-options

<select ng-model="sel" ng-options="t.code as t.name group by t.group for t in data">

answered May 23 '18 at 09:30

viren Kalkhudiya

762
6
8

thanks, but normally we can not change the object structure from Server API. also,that is a solution :) – wangzhen May 24 '18 at 02:31
You can change this on fly as well no need to rely on server side opject – viren Kalkhudiya May 24 '18 at 11:17

ng-options (key, values) in object

I want to know how to use ng-options render a select Element works.

use ng-options how to make it work?

2 Answers2

Linked