選択タグのオプションの一部または省略形を表示する

Question

オプションが選択されたときに、選択タグのオプション内容または省略形の一部を表示する方法については、私は疑問に思っていました。

例えば

：私は選択タグ -

• インド（IN）
• 中国（CN）
• ブラジル（BR）でオプションを次のようしている

インドから選択された場合オプション一覧は、IndiaではないタグINを選択します。

angularjsを使用することはできますか？提案してください。

Answer 1

angleuiブートストラップのドロップダウンで行うことができます。 {名:,コード：}

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

追加スクリプト私は、ブートストラップを使用したくない