is not showing icon properly. Instead if I use Facebook in the place of Email then it works but in the case of Email, it does not showing icon
it is not email it is envlop instead you can try <i class="fa fa-envelop-square"></i>
Envelop wont work as its envelope so try using this
<i class="fa fa-envelope-square" aria-hidden="true"></i>
Related
I am trying to disable a button on certain condition. I tried to use data-ng-class but when I change the tabs or switch between pages the buttons are getting activated intermittently. Would like to understand how can I achieve this feature.
<button type="button" class="btn btn-success" href="" data-ng-click="saveValueSellerBid(false);" data-ng-class="{disabled: currentQuote.acceptPricingSellerDisabled}">
<svg class="icon icon-checkmark"><title>Accept value seller offer</title><use xlink:href="#icon-checkmark"></use></svg>
<strong translate="Accept_Pricing_Seller_Offer"></strong>
</button>
Try this attribute instead:
ng-disabled="currentQuote.acceptPricingSellerDisabled"
<li ng-repeat="chat in openedChats track by $index" ng-click="init($index,'maximize')" role="button">
<button class="minimized-chat-box" >
<label style="float:left;color:white"><strong>{{chat.NAME}}</strong></label>
<i class="fa fa-remove" style="color:white;float:right;font-size:14px;" role="button" ng-click="init($index,'close');$event.stopPropagation();">
</i>
<i class="fa fa-window-maximize" style="color:white;float:right;font-size:14px" role="button" ng-click="init($index,'maximize');$event.stopPropagation();">
</i>
</button>
</li>
This is the code I have for making the icons inside the button clickable and it works fine on chrome, It stops working on firefox, Is there a way I can modify it to work on both. I really couldnt find one way to make it work for both!
Thanks in advance. I'm new to angularjs and I'd love to use angular to do this.
try this
$scope.init = function($event,$index,'maximize'){
$event.stopPropagation();
};
then call this like
ng-click="init($event,$index,'close')
I am creating menu using angularJS. I need to add or remove class while click
my code shown below
<i class="fa fa-home {active === 'home' ? 'fa-spin': ''}" ></i> Home
I need to add and remove class (fa-spin) based on active value. But the above code was not working.
Following is the correct syntax:
<i class="fa fa-home" ng-class="{'fa-spin':active=='home'}"></i> Home
Suggestion
Better use UI-router instead of making menu manually. UI-router has directives like ui-sref-active which will automatically add active class to active menu and remove from rest of the menu items
Try this:
[ngClass]= "[active == 'home' ? 'fa-spin' : '']"
Use ngClass (See documentation: https://docs.angularjs.org/api/ng/directive/ngClass)
The general syntax for the ng-class directive is as follows:
ng-class="{'class1': condition, 'class2':condition, ...'classn':condition}"
Therefore, your code should look like:
<i class="fa fa-home" ng-class="{'fa-spin': active === 'home'}" ></i> Home
<i ng-class="{'fa-spin': active === 'home'}" class="fa fa-home"></i>
I am trying to implement a "edit mode" feature.
When edit button is clicked, function backup will back up the item.
When save button is clicked, function save will save it.
But it does not work for Recover
<a><i class="fa fa-lg" ng-click="item.editable? item.enable = !item.enable:''" ng-class="item.enable? 'fa-toggle-on text-success': 'fa-toggle-off text-danger'"></i></a>
<a ng-if="!item.editable"><i class="fa fa-lg fa-pencil-square text-primary" ng-click="backup(item)"></i></a>
<a ng-if="item.editable"><i class="fa fa-lg fa-check-square text-primary" ng-click="save(item)"></i></a>
<a ng-if="item.editable"><i class="fa fa-lg fa-reply text-danger" ng-click="recover(item)"></i></a>
Plunker
Please look at my Edited plunker .. I've added an angular.extend(item, backup_item) to properly update the item object with it's backup.
Hope this helps
I have this popover with template
<i class="fa fa-link" popover-placement="right" uib-popover-template="'newReferenceTemplate.html'" popover-title="New link"> Add new external reference </i>
So when I click on that link icon, a popover opens witht this tamplate
<script type="text/ng-template" id="newReferenceTemplate.html">
<label>Title</label> <br>
<input ng-model="link.Title"> <br>
<label>Url</label> <br>
<input ng-model="link.Url"><br>
<i class="fa fa-floppy-o" > Save </i>
</script>
When I press that 'floppy' icon, I'd like to close the popover. Are there any ways of doing this?
All I can find on documentation is the popover-is-open value, but I don't know if I can use this somehow, any thoughts?
Step 1 : Add popover-is-open="isOpen" to the trigger link.
<i class="fa fa-link add-link"
popover-placement="right"
uib-popover-template="'newReferenceTemplate.html'"
popover-is-open="isOpen"
popover-title="New link"> Add new external reference </i>
Step 2 : When you click the floppy icon inside the popover, set isOpen to false:
This is the save icon of the popover:
<i class="fa fa-floppy-o" ng-click="save()"> Save </i>
This is in the controller:
$scope.save = function () {
$scope.isOpen = false;
};
See plunker
What had worked for me (in an angularJs app) is using
popover-trigger="'outsideClick'"
be aware to use it as it is, means, hard copy of string
"'outsideClick'".
If u don't use angularJs, u can just write:
popover-trigger="outsideClick"
Example:
<div uib-popover-template="'ApproveReject.html'"
popover-trigger="'outsideClick'"
popover-placement="bottom-right"
ng-click="onSubmitOrderStatus('date',$event);approveDates('date')">
Approve
</div>