Question

我有一系列国家：

var countriesList: [
                {name: "Israel", code: "IL"},
                {name: "India", code: "IN"},
                {name: "Andorra", code: "AD"}
            ]

以及一系列选定的国家/地区：

    selectedCountries: [
                    {
                        country:"IL"
                    }
                ]

我正在使用select2来选择国家/地区。我开始使用ng-repeat生成<options/>标记：

 <select
    id="countriesList"
    ui-select2
    multiple
    ng-model='data.selectedCountries'
    data-placeholder='Choose or Search for Countries'
    name='locations'
    ng-change='geoTargetingChanged()'>

       <option ng-repeat="country in data.countriesList" value="{{country.code}}">{{country.name}}</option>                
</select>

此方法运行良好，但它在开始时导致表单为$dirty。所以我开始使用`ng-options-机制（阅读this answer后）：

<select
            id="countriesList"
            ui-select2
            multiple
            ng-model='data.selectedCountries'
            data-placeholder='Choose or Search for Countries'
            name='locations'
            ng-change='geoTargetingChanged()'
            ng-options="country.code as country.name for country in data.campaignSettings.countriesList">
           <option></option>
</select>

现在的问题是项目的价值不是国家代码，而是数组中的索引。

我错过了什么吗？

Answer 1

这是plunker。

我没有看到任何问题，但我确实将selectedCountries的格式更改为国家/地区代码数组["IL", ...]），而不是您提供的数据结构（[{country:"IL", ...}] ）。

Angular确实使用索引作为值生成选项，但ngModel将包含propper值。如果您使用select进行表单提交，则应该使用ngModel中的数据而不是HTML中select的数据。如果您需要将页面上的选择数据放在表单中，您可以将select ngModel的值放入隐藏的表单元素中。

Answer 2

如果您可以将所选项目视为您所在countryList中的内容的镜像，那么：

$scope.data.selectedCountries = [$scope.data.countriesList[0]];

ng-options="country as country.name for country in data.countriesList">

然后，这是一个如何完成所需工作的更新内容：http://plnkr.co/edit/qE3SJm?p=preview

如果您只想要国家/地区代码，当您将其分配到selectedCountries时，您必须引用它在国家/地区数组中的实际位置：

$scope.data.selectedCountries = [$scope.data.countriesList[0].code];

ng-options="country.code as country.name for country in data.countriesList">

其他plunkr：http://plnkr.co/edit/ysAatS?p=preview

Answer 3

试试这个：

<select style="width: 100%" ui-select2="{multiple: true}" ng-model="countriesList" class="form-control select2"  multiple style="width:300px">
  <option></option>
  <option ng-repeat="country in countriesList" value="{{country}}">{{country}}</option>
</select>

假设结构与@rtcherry一样。

select2中的Angular ng-options - 设置值属性

3 个答案: