javascript - angularjs select ngoptions - 以不同的格式显示所选值

Question

我有一个国家/地区列表(带有代码和名称)，当展开列表时，我想显示“代码+名称”(例如“+44 英国”)，但是当我们选择一个国家/地区时，仅显示代码(“+44”)。可以用 Angular ngOptions 来做吗？

<select ng-model="userData.phoneCode" ng-options="(c.countryCallingCode.replace('00', '+') + ' ' + c.countryName) for c in countries track by c.countryId">
        <option value="" disabled selected data-i18n="Country"></option>
</select>

Controller 中国家/地区列表的格式:

countries = [
    {
      "countryCallingCode":"0033",
      "countryCode":"FR",
      "countryId":123,
      "countryName":"France"
    },
]

我想要这个:

我一直在谷歌中搜索，并尝试为此创建一个指令(我的 angularjs 水平为中等)，但我没有找到解决方案，始终将所选选项显示为“代码+名称”。

有什么想法吗？

Answer 1

我总是在 ng-options 中使用别名“as”:

<select ng-model="userData.phoneCode" ng-options="c.countryId as (c.countryCallingCode.replace('00', '+') + ' ' + c.countryName) for c in countries track by c.countryId">
    <option value="" disabled selected data-i18n="Country"></option>