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

Question

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?

Crowfoot

Are you looking at the value attribute of generated options? Don't. You shouldn't care about that. The only thing you ought to care about is the model value - i.e. $scope.Province – Likker

This is a perfectly legitimate question, which still hasn't been resolved yet. When you downvote, explain why, unless you're just being sad. I see SO is no longer a place to get help but a place where people come to prove they're better than you. – Crowfoot

Are you referring to me? I didn't downvote. Although the question could be better phrased to explain the why, I also don't understand the downvotes. But what do you mean by "not resolved"? The answer I provided should resolve you issue – Likker

Sorry, definitely wasn't referring to you, at least you tried to help. I think you got me as far as possible. I can't figure out why the data type is added to my value and the system I'm working with is very poorly designed and hardcoded so my hands are tied in many ways. I just thought this was community of support. Thnx again! – Crowfoot

You know what, I will mark your answer as accepted b/c I feel you are the only one who genuinely tried to help, though it didn't resolve my issue, it gave me enough to bypass it. – Crowfoot

We are all here to help - in what way did it not resolve the issue? – Likker

No matter what I do, Angular includes the data type in the Value property of the Option. I wrote a js wrapper to strip the data type prior to posting to the db, but its nasty because it's causing all kinds of problems when attempting to data-bind. I tried ng-repeat but it turns out I can't use the '{{var}}' double curly braces angular uses for binding because of my system. The work around is to handle parts of it manually; which I know defeats the purpose, I'm lost. – Crowfoot

"I can't use the '{{var}}' double curly braces angular uses for binding because of my system" - what does that mean? You can change the default curly braces for something else, if you need to - see documentation – Likker

Oh wow, I did not know that! Thank you! – Crowfoot

A valid reason for wanting to remove the data type would be a form which posts directly to the server and bypasses angularjs. I do this for downloading .csv and excel data. Valid question, even if the question was not well understood by the asker. – Hemielytron

I advise you to state the angular version that you're using instead of saying "the latest version". This way, this thread can be helpful in the future, when different versions of angular get released. – Caryophyllaceous

Answer 1

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>

Duque

Accepted this as the final answer due to the large number of upvotes it received. No longer on this project, so I cannot verify the proposed solution. – Crowfoot

Answer 2

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>

Likker

Unfortunately I need to work with a system designed years ago, I can use Python, sql and js but the system I'm working with uses the Value of an option to post to the dB. Unfortunately I'm not really using view model as intended, by lack of choice. Im using angularjs to keep the js code as clean as possible. And some use of its data binding. Ng-repeat does not provide many the same features.. Like default options.. Etc. Anyway idea why it would be happening? – Crowfoot

default option is specified by setting the model (e.g. $scope.Province = "ONTARIO";) to the default value you need. If you are just using AngularJS as a template engine, then you have poorly chosen a framework to use. – Likker

I agree, I'm just trying to make the best of a bad situation. Thnx for the help – Crowfoot

Answer 3

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>

Lorrianelorrie

In what way is this an answer? You just copied what the OP had and changed ng-model="Province" to ng-model="p" and slightly changed (without effect) the ng-options, If your intent was to tell the OP that everything seems to be working, then this is what the comments are for – Likker

Unless I missed something the op was getting data types bound to his model value. My example does not. Also as i said we need more information but yes prehaps better as a comment. – Lorrianelorrie

You missed something. The OP was asking why the value attribute of generated options have "string:ALBERTA" - Your example is functionally equal to that of the OP – Likker