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
Related
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>
<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 using angular package angular-xeditable the problem is I want to call its event onaftersave after i edit the label here is my html:
<h4 >{{ title.key || 'empty' }}
<span onaftersave="save()" editable-text="title.key ">
<i class="fa fa-pencil-square-o" "></i></span>
</h4>
the event onaftersave is called even if i click on the edit button and also while typing in the field
what I want is to call the event only when I click the button
Try to use this code this will helps to prevent function call.
<span>
<a onaftersave="save();" data-ng-model="title.key" e-placeholder="Your text" editable-text="title.key">
<span>{{title.key || 'empty'}}</span>
</a>
</span>
We have this font awesome icon fa fa-twitter which at the current time sides next to the actual tooltip button of materialize what i need to do is to put it inside the tooltip
<div class="center">
<i class="fa fa-twitter"></i>
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-customcss="csszzz" data-tooltip="I am tooltip" >Hover me!</a>
</div>
i know there is a data-customcss implementation aswell so theoritically we could implement it via .css also with url link of a photo icon but i can't figure out how that could be with angular
At the moment the data-customcss="csszzz" doesn't do anything as a pointed css class eg. .csszzz
just add data-html="true" to your anchor element and move icon inside of tooltip:
<div class="center">
<a class="btn tooltipped"
data-position="bottom"
data-delay="50"
data-html="true"
data-tooltip="<i class='fa fa-twitter'></i> I am tooltip" >Hover me!</a>
</div>
please look at http://materializecss.com/dialogs.html#tooltip for reference
plunker: https://plnkr.co/edit/3cZtphZ984R1ZqnkuLBX?p=preview
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>