在選擇標籤中顯示選項或選項內容的一部分

我想知道如何在選擇選項時顯示部分選項內容或選項內容的縮寫。在選擇標籤中顯示選項或選項內容的一部分

例如：我在選擇標籤 -

印度（IN）
中國（CN）
巴西（BR）以下選項

如果印度選自選項列表然後選擇標記顯示IN而不是India。

使用angularjs可以嗎？請建議。

2016-08-19 dharmendra vaishnav

您可以使用angularui bootstrap的下拉菜單來完成此操作。我假設你有對象國爲{名稱：，代碼：}

// 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="[email protected]*" 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="[email protected]*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script> 
 
    <script data-require="[email protected]" 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>

添加腳本

來源

2016-08-19 08:44:14 Mahesh

我不想使用引導。感謝您的回答。 –

在選擇標籤中顯示選項或選項內容的一部分

回答

相關問題