AngularJS的国家选择控件

Question

我需要在我的angular-breeze应用程序中使用一个国家下拉菜单，我尝试了以下方式：https://github.com/banafederico/angularjs-country-select 这里的问题是它没有国家/代码对，只有国家的全名，我不想将其保存到数据库中。是否有其他的angular指令/服务可以用来填充一个包含国家的下拉菜单？ 我已经做了一些研究，但我没有找到任何可供angular使用的现成的国家选择选项。

- devC

---

我建议你创建自己的。你甚至可以fork那个目录并加以改进。 - Brian Noah

我在想，这似乎是一个非常常见的功能，也许已经有人做过了，我不需要重新发明轮子 :) - devC

我通常不喜欢使用别人的代码。这往往会引入更多问题。话虽如此，如果没有其他选择，就在现有代码的基础上进行开发。 - Brian Noah

@CHAT_2013，一个显示国家的下拉菜单和其他下拉菜单有什么不同？Angular有select、ng-model和ng-options来创建下拉菜单。你不需要其他任何东西。 - JB Nizet

@JB Nizet: 我正在寻找一个自带国家列表实现的库，而不是像下面的答案建议的那样需要我单独定义国家列表。 - devC

Answer 1

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

Demo: http://plnkr.co/edit/2y9Jcektl8g2L0VoNQyp?p=preview

使用ng-options指令

<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'}
    ];

- Asik

---

@CHAT_2013 这就是为什么复制功能是可以的。它基本上是一个你可以控制的列表，你只需要做一个简单的循环即可。如果你想的话，你可以用指令来包装它。 - Brian Noah

好的，但你仍然需要生成国家列表，这基本上是你想要这种插件的主要原因。 - Mark Odey