[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1907
  • Last Modified:

AngularJS Country select directive

I'm trying to add the country codes to this AngularJS Country Select directive:
https://github.com/banafederico/angularjs-country-select

However, I'm not sure how to write the template to add the code as the option value:

    // shortening countries list
    var countries = {"AD":"Andorra", "AE":"United Arab Emirates", "AF":"Afghanistan", "AG":"Antigua and Barbuda", "AI":"Anguilla", 
                     "AL":"Albania", "AM":"Armenia", "AN":"Netherlands Antilles", "AO":"Angola", "AQ":"Antarctica", "AR":"Argentina", 
                     "AS":"American Samoa", "AT":"Austria", "AU":"Australia", "AW":"Aruba", "AX":"Åland Islands", "AZ":"Azerbaijan"};

    return {
      restrict: 'E',
      // How do I change this template to have the code as option value?
      template: '<select><option>' + countries.join('</option><option>') + '</option></select>',
      replace: true,
      link: function (scope, elem, attrs) {
        // How do I modify these to use the code and not the country name?
        if (!!attrs.ngModel) {
          var assignCountry = $parse(attrs.ngModel).assign;

          elem.bind('change', function (e) {
            assignCountry(elem.val());
          });

          scope.$watch(attrs.ngModel, function (country) {
            elem.val(country);
          });
        }
      }
    };
  }]);

Open in new window

0
Eddie Shipman
Asked:
Eddie Shipman
1 Solution
 
David S.Commented:
The template was made to use an array, but you're now trying to use an object. You need more than the call to join() to make a string containing the markup for <option> elements. If an additional change is need to answer the second part of your question, you'll need to find someone with experience using AngularJS.
    // shortening countries list
    var countries = {"AD":"Andorra", "AE":"United Arab Emirates", "AF":"Afghanistan", "AG":"Antigua and Barbuda", "AI":"Anguilla", 
                     "AL":"Albania", "AM":"Armenia", "AN":"Netherlands Antilles", "AO":"Angola", "AQ":"Antarctica", "AR":"Argentina", 
                     "AS":"American Samoa", "AT":"Austria", "AU":"Australia", "AW":"Aruba", "AX":"Åland Islands", "AZ":"Azerbaijan"};
    var countriesAr = [];
    angular.forEach(countries, function(value, key) {
      this.push('<option value="'+key+'"> + value + '</option>');
    },countriesAr);

    return {
      restrict: 'E',
      template: '<select>' + countriesAr.join('\n') + '</select>',
      replace: true,
      link: function (scope, elem, attrs) {
        // How do I modify these to use the code and not the country name?
        if (!!attrs.ngModel) {
          var assignCountry = $parse(attrs.ngModel).assign;

          elem.bind('change', function (e) {
            assignCountry(elem.val());
          });

          scope.$watch(attrs.ngModel, function (country) {
            elem.val(country);
          });
        }
      }
    };
  }]);

Open in new window

0
 
Eddie ShipmanAll-around developerAuthor Commented:
Even adding that, I can't make it work, here's the fiddle:

http://jsfiddle.net/Mrbaseball34/GBW74/
0
 
GaryCommented:
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now