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?

回答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>

回答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>

回答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>

来源：https://stackoverflow.com/questions/31575136/angularjs-ng-options-adds-data-type-to-options-value

标签

javascript

angularjs

ng-options