CODEWITHSUNDEEP
javascriptjqueryangularjsjson
Rajesh Narravula
Rajesh Narravula

Reputation: 1463

drop down options from json using angularjs data type is appending

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.

Upvotes: 0

Views: 540

Answers (2)

Niketan Raval
Niketan Raval

Reputation: 479

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>

Upvotes: 1

Aniket
Aniket

Reputation: 118

Check this one :-

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

{{ routeName.name}}

Upvotes: -2

Related Questions