Country select control for angularJs

Question

I need to use a country dropdown in my angular-breeze app, and I tried with the following: https://github.com/banafederico/angularjs-country-select

The problem here is that it doesn't have a country/code pair, just the long name of the country, which I don't want to save to the DB. Is there any other angular directive/service I can use to populate a dropdown with countries? I've done a bit of digging, but I didn't find any ready-to-use country select option for angular.

Answer 1

You can use ng-repeat or ng-options directive and create country dropdown. By this way, you have a full control. You can create as Directive if this element used in many places if needed.

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

Using ng-option directive

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

Using ng-repeat directive:

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

Countries Scope in your controller:

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