drop down options from json using angularjs data type is appending

Question

Populating select with JSON in AngularJS with ng-options,

<select id="routeName-{{$index}}" ng-model="row.routeName" ng-options="routeName.id as routeName.name for routeName in routeNames" ng-change="flowRootChange($index)" style="width: 115px;"></select>

input JSON is below:

scope.routeNames=[{"id":"1","name":"routeName1"},{"id":"2","name":"routeName2"}];

but in html displaying like below:

<select style="width: 115px;" ng-change="flowRootChange($index)" ng-options="routeName.id as routeName.name for routeName in routeNames" ng-model="row.routeName" id="routeName-0" class="ng-pristine ng-valid ng-touched">
   <option label="routeName1" value="string:1">routeName1</option>     
   <option label="routeName2" value="string:2">routeName2</option>
</select>

By reading the data using JQuery I'm getting string:2 as output.

console.log($("#routeName-"+rowid +" :selected").val());

I can't use ng-model/$scope.row.routeName because this drop down is in Table. How can i read selected value(without string:) without using split() method?. I'm using 'AngularJS v1.4.8' varsion.

You can also use: ng-options="routeName as routeName.name for routeName in routeNames track by routeName.id" — Sujata Chanda
– Sujata Chanda, Commented Jan 5, 2016 at 11:11
@SujataChanda this is populating options fine but selected value not setting, below approach is working fine one i accepted. — Rajesh Narravula
– Rajesh Narravula, Commented Jan 5, 2016 at 11:17

Niketan Raval · Accepted Answer · 2016-01-06 06:16:02Z

1

You can use ng-repeat instead of ng-options

<select style="width: 115px;" ng-change="flowRootChange($index)" ng-model="row.routeName" >
   <option ng-repeat='routeName in routeNames' label="routeName{{ routeName.id  }}" value="{{ routeName.id }}">{{ routeName.name }}</option> 
</select>

edited Jan 6, 2016 at 6:16

answered Jan 5, 2016 at 11:01

Niketan Raval

4792 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aniket · Accepted Answer · 2016-01-05 11:13:30Z

-2

Check this one :-

<select style="width: 115px;" ng-change="flowRootChange($index)" ng-model="name" >

answered Jan 5, 2016 at 11:13

Aniket

1181 silver badge7 bronze badges

1 Comment

Rajesh Narravula Over a year ago

please put detailed answer.

Collectives™ on Stack Overflow

drop down options from json using angularjs data type is appending

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related