This question already has answers here:
Font Awesome icon in select option
(10 answers)
Closed 3 years ago.
Is it possible to add font-awesome icon to<option> in <select>?
<body ng-app>
<i class="fa fa-camera-retro"></i> fa-camera-retro<br>
<select ng-model="choice" class="fa">
<option value="">Choose</option>
<option value="icon camera">icon camera</option>
<option value="icon bell">icon bell</option>
<option value="icon bicycle">icon bicycle</option>
</select>
Since font-awesome icons are fonts, they can be added to options by Unicode:
<script src="//unpkg.com/angular/angular.js"></script>
<link rel="stylesheet" href="//unpkg.com/font-awesome/css/font-awesome.css">
<body ng-app>
<i class="fa fa-camera-retro"></i> fa-camera-retro<br>
<select ng-model="choice" class="fa">
<option value="">Choose</option>
<option value=" camera"> camera</option>
<option value=" bell"> bell</option>
<option value=" bicycle"> bicycle</option>
</select>
<br>
Choice = <span class="fa">{{choice}}</span>
<br><span class="fa">--</span>
</body>
The DEMO on PLNKR
The Font-Awesome Cheatsheet
Related
I use bootstrap-select in my form to display some suppliers, but it looks like this:
My select looks like this:
<select class="selectpicker" data-live-search="true" title="Choose Supplier">
<option data-tokens="Supplier 1">Supplier 1</option>
<option data-tokens="Supplier 2">Supplier 2</option>
<option data-tokens="Supplier 3">Supplier 3</option>
<option data-tokens="add Supplier">Add Supplier</option>
</select>
The .css file is linked in the head tag and the .js is linked at the end of the site. What is the problem with this code? In the examples it looks the same but on my site it do not work. What am I missing or doing wrong?
in example using bootstrap-select.min.css
that's why not show you like example.
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
</head>
<div class="container">
<div class="row">
<h2>Bootstrap-select example</h2>
<p>This uses https://silviomoreto.github.io/bootstrap-select/</p>
<hr />
</div>
<div class="row-fluid">
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option data-subtext="Rep California">Tom Foolery</option>
<option data-subtext="Sen California">Bill Gordon</option>
<option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
<option data-subtext="Rep Alabama">Mario Flores</option>
<option data-subtext="Rep Alaska">Don Young</option>
<option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
</select>
<span class="help-inline">With <code>data-show-subtext="true" data-live-search="true"</code>. Try searching for california</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</html>
If I click on option 1 from dropdown list, a div which is initially hidden should be displayed. And if I click on another option from same dropdown list different div should be displayed and previous div should be hidden. I don't want to use JQuery as I have very less knowledge about it but only AngularJs.
My code is:
<div class="card">
<div class="item item-divider" align="center">
Candidates
</div>
<div class="padding">
<div class="form-group" align="center">
<label for="sel1"></label>
<select class="form-control" id="sel1">
<option>Location 1</option>
<option>Location 2</option>
<option>Location 3</option>
</select>
</div>
</div>
</div>
EDIT
Working example
http://plnkr.co/edit/SKdeAHMmvFB85ym1hfGr?p=preview
You can use ng-model to do this
<select ng-model="location.type" class="form-control" id="sel1" ng-change="changeme()">
<option ng-option value="1">Location 1</option>
<option ng-option value="2">Location 2</option>
<option ng-option value="3">Location 3</option>
</select>
<div ng-if="location.type == '1'">Location 1</div>
<div ng-if="location.type == '2'">Location 2</div>
<div ng-if="location.type == '3'">Location 3</div>
There's only one problem, and that's that empty option at the start. Once changed it's gone.
Okay, I really can't find the right term/words to describe this. Basically, I have a select control and a div with ng-repeat
<select ng-model="selectedCode" >
<option value="">ALL</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<select ng-model="selectedName" >
<option value="">ALL</option>
<option value="John">John</option>
<option value="Peter">Peter</option>
</select>
<div ng-repeat="item in myList" ng-if="item.code==selectedCode && item.Name==selectedName" >
<!--show some data-->
</div>
That code kinda works but I have no idea how to show all if the selected item is "ALL".
This Expression will Display all items with the selected code or name, if the other select is set to "ALL". It will also display all items, if both select boxes are set to "ALL". And it will show only the matching items with the correspondant name and code, if none of the select boxes has been set to "ALL".
ng-if="(selectedCode==item.code || selectedCode=='') &&
(selectedName==item.name || selectedName=='')">
To preselect a value, so the ng-if gets applied directly after page load, you may add an ng-init Expression for setting a default value, like so.
ng-init="selectedCode=''"
ng-init="selectedName='John'"
To put all this into a context, here is an example, showing a table with ng-repeat and the two select boxes for utilizing the ng-if Expression. The code "" and the name "John" are preselected and I added the JavaScript block.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="ngApp">
<select ng-model="selectedCode" ng-init="selectedCode=''">
<option value="">ALL</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<select ng-model="selectedName" ng-init="selectedName='John'">
<option value="">ALL</option>
<option value="John" selected="selected">John</option>
<option value="Peter">Peter</option>
</select>
<div ng-controller="ngController">
<table>
<tr>
<th>Code</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in myList" ng-if="(selectedCode==item.code || selectedCode=='') && (selectedName==item.name || selectedName=='')">
<td>{{item.code}}</td>
<td>{{item.name}}</td>
</tr>
</table>
</div>
</div>
<script>
angular.module('ngApp', [])
.controller('ngController', function($scope) {
$scope.myList = [ {code:'A', name:'John'}, {code:'B', name:'Peter'}, {code:'C', name:'Peter'} ];
});
</script>
</body>
</html>
I've the following <select> element:
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
When an option is selected, I'm changing text like so.
<section>
Greetings, <span ng-bind="pTitle"></span> Jones!
</section>
This works great. Now what I'd like to do is change other text based on the ng-bind change.
For example, in the <section> below, based on their choice I'd switch between his and her:
<section>
According to <span ng-bind="pTitle"></span> Jones, his **(or her)** coding ability needs some work!
</section>
What's the proper way to get this done? Thanks in advance.
You could use a custom filter that transforms the selected value to the wanted pronoum.
Like:
angular.module('myApp').filter('possessivePronoum', function() {
return function(title) {
return title === 'Mr.' ? 'his' : 'her';
};
});
And use it like this:
<section>
According to <span ng-bind="pTitle"></span> Jones, <span ng-bind="pTitle | possessivePronoum"></span> coding ability needs some work!
</section>
Warning: untested code
You can use ng-if
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, <span ng-if="pTitle=='Mr.'">His</span><span ng-if="pTitle=='Mrs.'||pTitle=='Ms.'">Her</span> coding ability needs some work!
</section>
</div>
Update: Angular 1.1.5 added a ternary operator, so now we can simply write
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' ? 'His' : 'Her' }} coding ability needs some work!
</section>
</div>
or in previous versions
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' && 'His' || 'Her' }} coding ability needs some work!
</section>
</div>
I have an Active Directory. I am creating a forms page in bootstrap. As I type in a portion of the name, I want the text box to come up with suggestions. For e.g. if I type in Al, it should show Alan, Alice, Alex in a combo style box below and I can select the same using a mouse click. The names come from the Active Directory.
I googled a fair bit, but perhaps I am missing something. If bootstrap + LDAP is not the right technology stack for this, what other lightweight web based options do I have? I can't use C# or Java.
This code may be helpful for you i am using datalist tag.
<body>
<div class="container">
<div class="row">
<form class="form-horizontal" style="margin-top:10%;">
<div class="form-group has-success">
<label for="country" class="col-sm-2 control-label">Select Country</label>
<div class="col-sm-2">
<input type="text" class="form-control" list="countryname" name="country">
<datalist id="countryname">
<div>
<option value="India">
<option value="France">
<option value="Germany">
<option value="Poland">
<option value="Indonesia">
<option value="USA">
<option value="UK">
<option value="Afghanistan">
<option value="Denmark">
<option value="Finland">
<option value="Greece">
<option value="Greenland">
<option value="Greenland">
<option value="Greenland">
<option value="Greenland">
</div>
</datalist>
</div>
</div>
<div class="form-group has-success">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
The combobox works exactly as autocompletion box.