angularjs select ngoptions - display selected value with different format

Question

I have a list of countries (with codes and names) and when the list is unfolded I want to display "code + name" (for example "+44 United Kingdom") but when we select one country, only display the code ("+44"). Is possible to do with 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>

Format of country list in the controller:

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

I want this:

I have been searching in google and I tried to create a Directive for this (my level in angularjs is medium) but I don't find a solution, always display the selected option as "code + name".

Any idea?

Could you show the country list? (I mean the array of objects in your controller) — lenilsondc
– lenilsondc, Commented Oct 31, 2016 at 11:02
I've tested your code and it's working fine check this out jsfiddle.net/tt27bjsn/1 — lenilsondc
– lenilsondc, Commented Oct 31, 2016 at 11:18
Umm, it seems to be a OSX issue, because it looks ok on windows (firefox and chrome). — lenilsondc
– lenilsondc, Commented Oct 31, 2016 at 11:41

Marcus Höglund · Accepted Answer · 2016-10-31 12:16:55Z

2

I always use alias, "as", in ng-options:

<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>

edited Oct 31, 2016 at 12:16

Marcus Höglund

16.9k11 gold badges54 silver badges72 bronze badges

answered Oct 31, 2016 at 11:08

Fabio Silva Lima

7246 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhil Mohanan · Accepted Answer · 2016-10-31 11:51:46Z

0

// Code goes here

angular
  .module('myApp', [])
  .run(function($rootScope) {
    $rootScope.title = 'myTest Page';
  })
  .controller('testController', ['$scope',
    function($scope) {
      $scope.countries = [{
        "countryCallingCode": "0033",
        "countryCode": "FR",
        "countryId": 123,
        "countryName": "France"
      }, ]
    }
  ])

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
  <style>
    .my-class {
      width: 51px !important;
    }
  </style>
</head>

<body data-ng-controller="testController">



  <select class="form-control my-class" name="mySelect" id="mySelect" ng-options="c.countryId as c.countryCallingCode.replace('00', '+')+'   '+c.countryName for c in countries" ng-model="userData.phoneCode">
    <option value="" disabled selected data-i18n="Country"></option>
  </select>



  selected : {{userData.phoneCode}}
</body>

</html>

You might need some styling adjustments then.

edited Oct 31, 2016 at 11:51

answered Oct 31, 2016 at 11:08

Nikhil Mohanan

1,2601 gold badge12 silver badges23 bronze badges

5 Comments

Jose Antonio Over a year ago

Hi, Thanks but that is not I wanted it. I just edited my post for add a image. I want to display only the code in the selected option and when the list is unfolded, display code + name. I don't know if is possible to do with Angularjs.

Nikhil Mohanan Over a year ago

@josekron, You might need some styling adjustments then

Jose Antonio Over a year ago

@Niknil I tried to give it a specific width for hiding " France" and only show "+33" but the problem is there are countries with a one-digit codes or three-digit codes. I could use a CSS stylesheet to dynamically adjust the width for the different digit size but I think it won't look professional... I prefer to put the same width with one, two or three digits.

Nikhil Mohanan Over a year ago

@josekron, Thanks for the interesting task,Will try to achieve this.

Jose Antonio Over a year ago

@Niknil I found a solution although it's not very sophisticated. See my answer.

Jose Antonio · Accepted Answer · 2016-10-31 15:35:41Z

I found a solution that works for me although maybe it's not the best solution...

HTML:

<div style="width:60px">
<select ng-model="userData.phoneCode" style="white-space:pre-wrap;" ng-options="(getFormatCountryCode(c)) for c in countries track by c.countryId">
    <option value="" disabled selected data-i18n="Country"></option>
</select>
</div>

Controller:

$scope.getFormatCountryCode = function(c){

  var code = c.countryCallingCode.replace('00', '+');
  var spaces = '   ';
  var sizeCode = code.length;
  if(sizeCode == 3){
    spaces += '    ';
  }
  else if(sizeCode == 2){
    spaces += '     ';
  }
  return code +spaces+c.countryName;
}

In the function "getFormatCountryCode" I add the white-spaces depending on the length of each code. AngularJs won't display the white-spaces in the unfolded list but adding the style "white-space:pre-wrap;" Angularjs will display the white-spaces in the selected option. So we only have to put a specific width for hide the name.

Collectives™ on Stack Overflow

angularjs select ngoptions - display selected value with different format

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related