Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS ng-options adds data type to option's value

Trying to use the latest version (1.5.8) of AngularJS and ng-options to populate a dropdownlist.

Issue is that it's adding the data type as well as the value, like so:

<select class="possedetail ng-valid ng-dirty ng-valid-parse ng-touched" ng-model="Province" ng-options="p as p for p in provList">
<option value="string:ALBERTA" label="ALBERTA">ALBERTA</option>
<option value="string:BRITISH COLUMBIA" label="BRITISH COLUMBIA">BRITISH COLUMBIA</option></select>

I need string:Alberta'...

This is my data source:

$scope.provList = ["ALBERTA","BRITISH COLUMBIA","MANITOBA","NEW BRUNSWICK","NEWFOUNDLAND AND LABRADOR","NORTHWEST TERRITORIES","NOVA SCOTIA","NUNAVUT","ONTARIO","PRINCE EDWARD ISLAND","QUEBEC","SASKATCHEWAN","YUKON",];

I have read the google documentation, searched the web and tried changing my data source format to [{name: "Alberta"}, {name:"BC"}]...

Please help, any way around this?

like image 344
OverMars Avatar asked Jul 22 '15 22:07

OverMars


People also ask

How do I set default selected value in ng-options?

Use ng-init to set default value for ng-options . Save this answer.

What is the difference between Ng-options and Ng-repeat?

ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat. Save this answer.

What is Ng option AngularJS?

The ng-options Directive in AngularJS is used to build and bind HTML elements with options to a model property. It is used to specify <options> in a <select> list. It is designed specifically to populate the items on a dropdown list. This directive implements an array, in order to fill the dropdown list.

What does ng value do?

The ng-value directive sets the value attribute of a input element, or a select element.


1 Answers

This might be a little late, but adding "track by" to your ng-options expression should solve your problem. i.e.

<select ng-model="Province" ng-options="p for p in provList track by p"></select>
like image 154
leo Avatar answered Sep 27 '22 22:09

leo