CODEWITHSUNDEEP
javascriptangularjsdrop-down-menuionic-framework
jfredsilva
jfredsilva

Reputation: 1450

Show different text from option

I have a dropdown with all countries and their phone code. My drop down as a limited space, so the text must be short.

When the dropdown is open, I want to show the the country name and the phone code, but when a user select an option, I only want to show the phone code on the dropdown as the selected value.

<select ng-model="country" ng-options="c.phoneNumberCountryCode as (c.countryName + ' (+' + c.phoneNumberCountryCode + ')' ) for c in countriesList">           
</select>

http://jsfiddle.net/0fadq61k/

Upvotes: 0

Views: 125

Answers (2)

LJ.Wizard
LJ.Wizard

Reputation: 605

I would combine ng-selected with ng-click in an attempt to achieve this. The problem with ng-click (inherent in Angular itself) is that while it does refresh your whole list, it does not refresh the already selected item. I would suggest that you change your design. One thing you could do is use for example the first 3 letters of the country name, or a similar combination. Place the following code in your fiddle to see an example:

HTML

<div ng-controller="Ctrl">     
     <select ng-model="country" ng-options="c.phoneNumberCountryCode as (c.countryName + ' (+' + c.phoneNumberCountryCode + ')' ) for c in countriesList" ng-selected="onCodeSelected(country)" ng-click="onClick()">           
     </select>
</div>

JS

var app = angular.module('app', []);

function Ctrl($scope) {

  //this should be in a service
  $scope.countriesList = [{
    id: 0,
    countryName: 'Portugal',
    phoneNumberCountryCode: '351'
  }, {
    id: 1,
    countryName: 'Spain',
    phoneNumberCountryCode: '34'
  }, {
    id: 2,
    countryName: 'UK',
    phoneNumberCountryCode: '44'
      }, {
    id: 3,
    countryName: 'Australia',
    phoneNumberCountryCode: '61'
  }]; 

    $scope.onClick = function () {
    //refresh data from service instead of hardcoded like below
        $scope.countriesList[0].countryName = "Portugal";
      $scope.countriesList[1].countryName = "Spain";
      $scope.countriesList[2].countryName = "UK";
      $scope.countriesList[3].countryName = "Australia";
  }

    $scope.onCodeSelected = function(countryCode) {
    if (countryCode) {
     angular.forEach($scope.countriesList, function(value, key) {
        if (value.phoneNumberCountryCode === countryCode) {
            var countryShort = $scope.countriesList[value.id].countryName.substring(0, 3);
            $scope.countriesList[value.id].countryName = countryShort;
        }
      })
    }
  }
}

Upvotes: 1

Shreesha
Shreesha

Reputation: 1

Can you try this, 

    <div ng-controller="Ctrl">     

    <select ng-options="item as item.id for item in items" ng-model="selected"
      ng-change="dispThis(selected)"
    ></select> {{output}}        

<div>

and in script

  var app = angular.module('app', []);

function Ctrl($scope) {

  $scope.items = [{
    label: 'Portugal',
    id: '351'
  }, {
    label: 'Spain',
    id: '34'
  }];  


  $scope.dispThis = function(c){

      console.log(c);
      $scope.output = "Country: "+c.label+" & Ph.code "+
            c.id

    };
}

Upvotes: 0

Related Questions