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

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 将包含正确的值。如果您使用 select 进行表单提交，则应该使用 ngModel 中的数据，而不是 HTML 中 select 中的数据。如果您需要将页面上选择的数据放入表单中，可以将选择的 ngModel 值放入隐藏的表单元素中。