angularJs 的国家选择控制答案

【问题标题】：Country select control for angularJsangularJs 的国家选择控制
【发布时间】：2015-02-09 06:58:46
【问题描述】：

我需要在我的 angular-breeze 应用程序中使用国家/地区下拉菜单，我尝试了以下操作： https://github.com/banafederico/angularjs-country-select

这里的问题是它没有国家/代码对，只有国家的长名称，我不想将其保存到数据库中。我可以使用其他任何角度指令/服务来填充国家/地区的下拉列表吗？我已经进行了一些挖掘，但我没有找到任何现成的 Angular 国家/地区选择选项。

【问题讨论】：

我建议您自己创建。你甚至可以 fork 那个目录，然后扩充它。
我想知道，这似乎是一个非常常见的功能，也许已经有一些东西没有我重新发明轮子:)
我一般不喜欢使用别人的代码。它通常会引入更多问题。话虽如此，可能还有另一个，但如果没有建立在现有的之上。
@CHAT_2013 显示国家/地区的下拉菜单与任何其他下拉菜单有何不同？ Angular 有 select、ng-model 和 ng-options 来创建下拉菜单。你不需要其他任何东西。
@JB Nizet：我一直在寻找与 countrylist 一起提供的实现，而无需按照以下答案中的建议单独定义国家/地区列表。

标签： angularjs country-codes

【解决方案1】：

您可以使用ng-repeat 或ng-options 指令并创建国家/地区下拉菜单。通过这种方式，您可以完全控制。如果此元素在许多地方使用，如果需要，您可以创建为指令。

演示：http://plnkr.co/edit/2y9Jcektl8g2L0VoNQyp?p=preview

使用 ng-option 指令

<select ng-model="country" ng-options="country.name for country in countries track by country.code">
  <option value="">-- Select a Country --</option>
  </select>

使用 ng-repeat 指令：

<select ng-model="country">
    <option value="">-- Select a Country --</option>
    <option ng-repeat="country in countries" value="{{country.code}}">{{country.name}}</option>
</select>

控制器中的国家/地区范围：

    $scope.countries = [ 
        {name: 'Afghanistan', code: 'AF'},
        {name: 'Åland Islands', code: 'AX'},
        {name: 'Albania', code: 'AL'},
        {name: 'Algeria', code: 'DZ'},
        {name: 'American Samoa', code: 'AS'}
    ];

【讨论】：

@CHAT_2013 这就是为什么复制功能是可以的。它基本上是一个您可以控制的列表。你做一个简单的循环。如果你愿意，你可以用指令包装它。
很好，但您仍然需要生成国家/地区列表，这基本上是您想要此类插件的主要原因。