角NG选项中选择2 - 设置值属性 [英] Angular ng-options in select2 - settings value property

问题描述

我有个国家的数组：

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

和选定的国家的数组：

    selectedCountries: [
                    {
                        country:"IL"
                    }
                ] 

我使用SELECT2选择国家。
我开始与NG-重复生成的＆LT;选项/＆GT; 标签：

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

这种方法效果不错，但它造成的形式是 $脏就在开始。
所以我开始使用'NG-选项 - 机制（看完后<一个href=\"http://stackoverflow.com/questions/12139152/how-to-set-value-property-in-angularjs-ng-options\">this答案）：

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

现在的问题是，物品的价值不是国code，这是它们在阵列中的索引。

Now the problem is that the value of the items is not the country code, it is their index in the array.

我这么想吗？

推荐答案

下面是一个 plunker 。

我看不出有什么问题，尽管我没有改变 selectedCountries 的格式由国家codeS（ [数组IL，...] ），而不是您所提供的数据结构（ [{国家：IL，...}] ）。

I don't see any issue, although I did change the format of selectedCountries to be an array of country codes (["IL", ...]) instead of the data structure you provided ([{country:"IL", ...}]).

角也会产生使用索引作为值的选项，但 ngModel 将包含propper值。如果你正在做表单提交的选择，你应该使用数据出来的，而不是 ngModel 中的数据从HTML选择。如果你需要把从选择的数据页的形式，你可以把选择的 ngModel 的值到隐藏的表单元素。

Angular does generate the options using the index as the value, but the ngModel will contain the propper value. If you are doing form submission with the select, you should be using the data out of the ngModel instead of the data from the select in the HTML. If you need to put the data from the select on the page in a form, you could put the values of the select's ngModel into hidden form elements.

这篇关于角NG选项中选择2 - 设置值属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！