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" 
    }, 
]

我想这一点：

我在谷歌一直在寻找，我试图创建这样的指令（我在angularjs中的级别是中等），但我没有找到解决方案，总是将选定的选项显示为“代码+名称”。

有什么想法？

来源

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不会在展开的列表中显示空白，但会添加样式“空白：预包装”。 Angularjs将在选定的选项中显示空格。所以我们只需要放一个特定的宽度来隐藏名字。

来源

2016-10-31 14:46:15 josekron

我总是用别名 “如” 在NG选项：

<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我试图给它一个隐藏“法国”的特定宽度，只显示“+33”，但问题是有一个数字代码或三位数字的国家，数字代码。我可以使用CSS样式表来动态调整不同数字大小的宽度，但我认为它不会看起来很专业......我更喜欢用一个，两个或三个数字来放置相同的宽度。 – josekron

angularjs select ngoptions - 以不同的格式显示选定的值

回答

相关问题