Мне было интересно, как отобразить часть содержимого опций или аббревиатуру содержимого опций в теге select при выборе опции.
Например: у меня есть следующая опция в select tag-
Если Индия выбрана из списка опций, выберите тег show IN
not India
.
Можно ли использовать angularjs
? Пожалуйста, предложите.
Вы можете сделать это с выпадающим списком 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>
добавленный скрипт