angularjs select ngoptions - отображать выбранное значение в другом формате

У меня есть список стран (с кодами и именами), а когда список разворачивается, я хочу отобразить «code + name» (например, «+44 United Kingdom») но когда мы выбираем одну страну, показываем только код («+44»). Можно ли использовать Angular ngOptions?angularjs select 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>

Формат списка стран в контроллере:

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

Я хочу это:

Я искал в Google, и я попытался создать директиву для этого (мой уровень в angularjs является средним), но я не нахожу решение, всегда отображаю выбранную опцию как «code + name».

Любая идея?

источник

2016-10-31 josekron

Не могли бы вы отобразить список стран? (Я имею в виду массив объектов в вашем контроллере) –

@LenilsondeCastro Я редактирую свой пост со списком стран – josekron

Я проверил ваш код, и он отлично работает, проверьте это https://jsfiddle.net/tt27bjsn/1/ –

Я нашел решение, которое работает для меня, хотя, возможно, это не самое лучшее решение ...

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>

Контроллер:

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

В функции "getF ormatCountryCode «Я добавляю пробелы в зависимости от длины каждого кода. AngularJs не отображает белые пробелы в развернутом списке, но добавляет стиль «white-space: pre-wrap»; Angularjs отобразит белые пробелы в выбранной опции. Поэтому нам нужно только указать определенную ширину для скрыть имя.

источник

2016-10-31 14:46:15 josekron

Я всегда использую псевдоним, "как", в нг-опций:

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

источник

2016-10-31 11:08:21

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

Вам может понадобиться некоторые корректировки стайлинга тогда.

источник

2016-10-31 11:08:34

Привет, спасибо, но я этого не хочу. Я только что редактировал свой пост, чтобы добавить изображение. Я хочу отображать только код в выбранном параметре и когда список разворачивается, отображать код + имя. Я не знаю, можно ли делать с Angularjs. – josekron

@josekron, вам может понадобиться корректировка стиля, а затем –

@Niknil Я попытался дать ему определенную ширину для скрытия «France» и показать только «+33», но проблема в том, что есть страны с одноразрядными кодами или трехзначные коды, цифр. Я мог бы использовать таблицу стилей CSS для динамической настройки ширины для разных размеров цифры, но я думаю, что она не будет выглядеть профессионально ... Я предпочитаю использовать одну и ту же ширину с одной, двумя или тремя цифрами. – josekron

angularjs select ngoptions - отображать выбранное значение в другом формате

ответ

Смежные вопросы