CODEWITHSUNDEEP
javascriptangularjsng-options
OverMars
OverMars

Reputation: 1049

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?

Upvotes: 5

Views: 5870

Answers (3)

leo
leo

Reputation: 206

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>

Upvotes: 19

New Dev
New Dev

Reputation: 49590

If you are properly designing your Angular app, you should not care how <option> elements are generated and what value attribute is assigned. This is the View. The ViewModel is what is set on the scope variable that you assigned to it.

In other words, your example works. $scope.Province will equal the selected province string, e.g. "ALBERTA". Angular does the translation for you.

Then, you could submit it to your server, or do whatever you need with it:

$http.post("/some/api", {data: $scope.Province})

But, if you must, you could generate the <option>s with ng-repeat. It would be less efficient and more verbose, but it would work:

<select ng-model="Province">
  <option ng-repeat="p in provList" value="{{p}}">{{p}}</option>
</select>

Upvotes: 1

lpoulter
lpoulter

Reputation: 158

Can't tell much with out more code, can you do a fiddle. This works fine http://jsfiddle.net/zm0eq6xf/

<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select 
        ng-options="p for p in provList"
        ng-model="p"></select>
    {{ p }}
</fieldset>

Upvotes: -3

Related Questions