Показать часть опции или сокращение содержимого опции в теге select

0

Мне было интересно, как отобразить часть содержимого опций или аббревиатуру содержимого опций в теге select при выборе опции.

Например: у меня есть следующая опция в select tag-

  • Индия (IN)
  • Китай (CN)
  • Бразилия (BR)

Если Индия выбрана из списка опций, выберите тег show IN not India.

Можно ли использовать angularjs? Пожалуйста, предложите.

Теги:
ionic-framework
html-select

1 ответ

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="[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>

добавленный скрипт

  • 0
    я не хочу использовать бутстрап Спасибо за Ваш ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню