Question

我想知道在选择某个选项时，在select标签中显示部分选项内容或选项内容缩写的方式。

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

印度（IN）
中国（CN）
巴西（BR）

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

可以使用angularjs吗？请建议。

Answer 1

你可以使用angularui bootstrap的下拉列表。我假设您将国家/地区对象设为{name：，code：}

＆＃13;

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

＆＃13;

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

＆＃13;

添加了脚本

在选择标记

1 个答案: