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>
Related
I have two states for a button, "State1" and "State2".
It defaults to "State2". When I click the button, it toggles to "State1".
When I click anywhere outside the button, I need it to change from "State1" back to "State2". This is my code:
<div ng-click="Ctrl.Check = !Ctrl.Check">
<a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" >
{{ Ctrl.Check ? 'State1' : 'State2' }}
</a>
</div>
It sounds like you're just checking whether the element has focus. This is much easier than putting down a bunch of ng-click handlers all over your form just to toggle one input.
Use ng-focus and the corresponding ng-blur. If you use HTML elements that can have focus (like a <button>), you can use code like
<button type="button" class="btn"
ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }"
ng-focus="Ctrl.Check = true"
ng-blur="Ctrl.Check = false">
{{ Ctrl.Check ? 'State1' : 'State2' }}
</button>
Demo on plnkr
Code here: https://plnkr.co/edit/ysD1JN0ELqu7ACgkkp79?p=preview
I have two buttons. One is "State1" and another is "State2".
In the beginning, it is in "State2" button. Then I click "State2" button, it toggle to "State1" button, also generate popover.
I want to click out of "State1" button and popover, then it will change from "State1" button to "State2" button. I use popover-trigger="outsideClick", but it does not work. Please advise. Thanks
<div ng-click="Ctrl.Check = !Ctrl.Check" popover-trigger="outsideClick">
<a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" confirm-link="Ctrl.deleteCurrent(Ctrl.A)" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="outsideClick" popover-placement="right">
{{ Ctrl.Check ? 'State1' : 'State2' }}
</a>
</div>
here is the plunker
https://plnkr.co/edit/KXWzDN882fWEByUNzks6?p=preview
What I did
<a
ng-class="{'btn-danger': !isOpen, 'btn-default': isOpen }"
state-change-capture
confirm-link="Ctrl.deleteCurrent(Ctrl.A)"
uib-popover="I appeared on focus! Click away and I'll vanish..."
popover-trigger="'outsideClick'"
popover-is-open="isOpen"
ng-click="isOpen = !isOpen"
popover-placement="right">
{{ isOpen ? 'State1' : 'State2' }}
</a>
in the controller
$scope.isOpen = false;
$scope.$watch('isOpen', function (oldVal, newVal) {
//just for reference in case you need to know the status of popover
});
added a property for uib-popover known as popover-is-open="isOpen"
which tells if the popover is visible or not and based on that set the State 1 or 2
Also if you need to observe it then have added a watch to controller, just in case you need it.
You're missing the '' in the popover-trigger, and you don't need the first one on the div itself:
<div ng-click="Ctrl.Check = !Ctrl.Check">
<a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" confirm-link="Ctrl.deleteCurrent(Ctrl.A)" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="'outsideClick'" popover-placement="right">
{{ Ctrl.Check ? 'State1' : 'State2' }}
</a>
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>
ng-click does not work inside ng-repeat. I have read all the guides and similar questions, but nothing work in my code. If I click on the tag inside the ng-repeat nothing happen, but if I click on my button the function is called.
html
<div ng-repeat="sykdom in sykdommer" ng-model="sykdom.name" ng-click="test();">
<a class="item item-icon-right" href="#" ng-click="test();" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
<button ng-click="test()> test </button>
JS
$scope.sykdommer = [{name:'test1'},
{name:'test2'},
{name:'test3'}];
$scope.test = function(){
alert('you clicked!');
};
I have tried with ng-click="$parent.test()" and ng-model="sykdom.name" without any luck. Please help, really stuck on this problem :(
Here is an example i've made with your data: http://plnkr.co/edit/o4sqPd
Template should be like:
<div ng-repeat="sykdom in sykdommer">
<a class="item item-icon-right" href="#" ng-click="test(sykdom.name);" >
{{sykdom.name}}
<i class="icon ion-ios-arrow-right"></i>
</a>
</div>
You should use ng-model directive only in case if it's a part of you changeable data - in input/textarea etc. tags (documentation: https://docs.angularjs.org/api/ng/directive/ngModel)