显示选项中的不同文本答案

【问题标题】：Show different text from option显示选项中的不同文本
【发布时间】：2016-05-30 23:33:54
【问题描述】：

我有一个包含所有国家/地区及其电话代码的下拉菜单。我的下拉菜单空间有限，所以文字一定要简短。

当下拉菜单打开时，我想显示国家名称和电话代码，但是当用户选择一个选项时，我只想在下拉菜单中显示电话代码作为所选值。

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

http://jsfiddle.net/0fadq61k/

【问题讨论】：

来自ng-model 的“国家”来自哪里？

标签： javascript angularjs drop-down-menu ionic-framework

【解决方案1】：

我会将ng-selected 与ng-click 结合起来尝试实现这一目标。 ng-click（Angular 本身固有）的问题在于，虽然它确实刷新了你的整个列表，但它并没有刷新已经选择的项目。我建议你改变你的设计。您可以做的一件事是使用例如国家名称的前 3 个字母或类似的组合。将以下代码放入您的小提琴中以查看示例：

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>

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

【讨论】：

谢谢，您的解决方案几乎完美。唯一的问题是，在选择了一个国家然后重新打开下拉菜单后，之前选择的国家列表中的文本也发生了变化。我会试着弄清楚。
是的，这就是我提到的问题。当您重新打开下拉菜单时，我认为 Angular 没有办法刷新所选国家/地区的名称，这就是我使用前三个字母的原因。否则很容易完全删除整个名称并只显示电话代码，但用户将不知道他们使用的是哪个代码。

【解决方案2】：

你可以试试这个，

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

在脚本中

  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

    };
}

【讨论】：

对不起，我无权登录 fiddle to code。