AngularJS ng-options 将数据类型添加到选项的值

Question

正在尝试使用 AngularJS 的最新版本 (1.5.8) 和 ng-options 来填充下拉列表。

问题是它添加了数据类型和值，如下所示：

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

我需要string:Alberta'...

这是我的数据源：

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

我已阅读 google 文档，搜索网络并尝试将我的数据源格式更改为 [{name: "Alberta"}, {name:"BC"}].. .

请帮忙解决这个问题？

Answer 1

没有更多的代码无法说明太多，你可以做一个 fiddle。这很好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>

Answer 2

如果您正确设计了 Angular 应用程序，则不应关心 <option> 元素的生成方式以及分配的 value 属性。这就是视图。 ViewModel 是在您分配给它的范围变量上设置的。

换句话说，您的示例有效。 $scope.Province 将等于所选省份字符串，例如"ALBERTA"。 Angular 为您翻译。

然后，您可以将它提交到您的服务器，或者用它做任何您需要的事情：

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

但是，如果必须的话，您可以使用 ng-repeat 生成 <option>。这样效率会更低，也更冗长，但它会起作用：

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

Answer 3

这可能有点晚，但是将 "track by" 添加到您的 ng-options 表达式应该可以解决您的问题。即

<select ng-model="Province" ng-options="p for p in provList track by p"></select>

AngularJS ng-options 将数据类型添加到选项的值

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

javascript

angularjs

ng-options