Question

我有一个国家/地区列表（包含代码和名称），当列表展开时，我想显示“代码+名称”（例如“+44英国”），但是当我们选择一个国家/地区时，只显示代码（“+44”）。可以使用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>

控制器中国家/地区列表的格式：

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

我想要这个：

我一直在谷歌搜索，我试图为此创建一个指令（我在angularjs中的级别是中等）但我找不到解决方案，总是将所选选项显示为“代码+名称”。

有什么想法吗？

Answer 1

我总是在ng-options：

中使用别名“as”

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

Answer 2

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

您可能需要进行一些样式调整。

Answer 3

我找到了一个适合我的解决方案，虽然它可能不是最好的解决方案......

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

在函数“getFormatCountryCode”中，我根据每个代码的长度添加空格。 AngularJs不会在展开列表中显示空格，而是添加样式“white-space：pre-wrap;” Angularjs将在所选选项中显示空格。所以我们只需要设置一个特定的宽度来隐藏名称。

angularjs select ngoptions - 以不同格式

3 个答案: