在选择标签中显示选项的一部分或选项内容的简写答案

【问题标题】：Show a part of option or shorthand of option content in select tag在选择标签中显示选项的一部分或选项内容的简写
【发布时间】：2016-08-19 06:55:09
【问题描述】：

我想知道当一个选项被选中时，如何在选择标签中显示部分选项内容或选项内容的缩写。

例如：我在选择标签中有以下选项-

印度(IN)
中国（中）
巴西(BR)

如果从选项列表中选择了印度，则选择标签显示IN 而不是India。

是否可以使用angularjs？请提出建议。

【问题讨论】：

标签： angularjs html css ionic-framework html-select

【解决方案1】：

您可以使用 angularui bootstrap 的下拉菜单来完成。我假设您的国家对象为 {name:, code:}

// Code goes here
var app = angular.module("app",['ui.bootstrap'])
app.controller("ctrl", function($scope){
  $scope.title = "dropdown demo";
   $scope.items = [
    {name: "India", code:"IN"},
    {name: "Canada", code:"CA"},
    {name: "United Kingdom", code:"UK"}
  ];
  $scope.selected = null;
  $scope.selectOption  = function(c){
    $scope.selected = c;
  }
})

    <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <script data-require="angularjs@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
    <script data-require="ui-bootstrap@1.2.5" data-semver="1.2.5" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.2.5.js"></script>





  
<div ng-app ="app" ng-controller="ctrl">
    <h1>{{title}}</h1>
    <span uib-dropdown="">
      <a href="" id="simple-dropdown" uib-dropdown-toggle="">
        {{selected.code || "select Country"}}
      </a>
      <ul class="dropdown-menu" uib-dropdown-menu="" aria-labelledby="simple-dropdown">
        <li ng-repeat="c in items">
          <a ng-click="selectOption(c)">{{c.name}} ({{c.code}})</a>
        </li>
      </ul>
    </span>
  </div>

添加脚本

【讨论】：

我不想使用引导程序。谢谢你的回答。