CODEWITHSUNDEEP
javascriptangularjshtml
Jose Antonio
Jose Antonio

Reputation: 598

angularjs select ngoptions - display selected value with different format

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:

enter image description here

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?

Upvotes: 1

Views: 1691

Answers (3)

Jose Antonio
Jose Antonio

Reputation: 598

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

enter image description here enter image description here

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.

Upvotes: 0

Fabio Silva Lima
Fabio Silva Lima

Reputation: 714

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>

Upvotes: 2

Nikhil Mohanan
Nikhil Mohanan

Reputation: 1260

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

Upvotes: 0

Related Questions