Both functions are triggered while I click on the inner a tag, how can I restrict this. I need to trigger onDelete() function only when is clicked
<div ng-click="ctrl.onEdit()">
{{content}}
<a href="" ng-click="ctrl.onDelete()" > Delete Me !</a>
</div>
Pass the $event in ctrl.onDelete($event) and then stop propagating it in the on delete function, you need this because events bubble towards parent elements
this.onDelete = function (event){
event.stopPropagation();
}
or simply write this after you ondelete function in html
ng-click="ctrl.onDelete(); $event.stopPropagation();"
You can achive that by passing $event and use stopPropagation:
<div ng-click="onEdit($event)" style="background-color:red;">
{{content}}
<a href="" ng-click="onDelete($event)" > Delete Me !</a>
</div>
JS
$scope.onEdit = function(event){
console.log("onEdit");
event.stopPropagation();
}
$scope.onDelete = function(){
console.log("onDelete");
event.stopPropagation();
}
Demo Plunkr
However its not good practice to use nested ng-click. Its hard to maintain and can lead to unexpected behaviour.
<div ng-click="ctrl.onEdit()">
{{content}}
</div>
<div>
<a href="" ng-click="ctrl.onDelete()" > Delete Me !</a>
</div>
I think it will work like this
It's called event bubbling. You can propagate the the event and cancel it like this
function onDelete($event){
if($event){
if ($event.stopPropagation) $event.stopPropagation();
if ($event.preventDefault) $event.preventDefault();
}
}
HTML
<div ng-click="ctrl.onEdit()">
{{content}}
<a href="" ng-click="ctrl.onDelete($event)" > Delete Me !</a>
</div>
Related
I am using onclick="window.open('tel:+94777122240')" in my angular ionic application. which lets the user to open dial box when onclick. i am trying to pass values to the onclick function withing ng-repeat. but the ng-repeat values doesnt pass to fucntion
i have used this method to solve it. but it does not work
<div ng-repeat="branch in branches">
<a ng-click="window.open('tel:branch.telephone')" class="button">Call Now</a>
</div>
Angular expressions are evaluated against the scope.
Try to move the ng-click function to the controller:
$scope.open = function(branch) {
window.open('tel:' + branch.telephone);
}
<div ng-repeat="branch in branches">
<a ng-click="open(branch)" class="button">Call Now</a>
</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)
I have a button inside of an accordion, like this:
I made the entire accordion head clickable by doing this:
<accordion-heading ng-click="isopen=!isopen">
<div>
<span class="accordion-header">
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': accordionOpen,
'glyphicon-chevron-right': !accordionOpen}"></i>
</span>
<button class="delete-button" ng-click="remove()">Delete</button>
</div>
</accordion-heading>
The problem I have is when I click the delete button, remove() is called AND the accordion open/closes.
Is there a way to stop the accordion header from opening/closing when I click the delete button?
You can use $event.preventDefault(); $event.stopPropagation();:
<button class="delete-button" ng-click="
$event.preventDefault(); $event.stopPropagation(); remove()">Delete</button>
The click event object is accessible in ng-click as $event. preventDefault and stopPropagation will stop the event from reaching the accordion-heading click handler.
You need to stop the event from bubbling to the container
$scope.remove = function(event) {
event.preventDefault();
event.stopPropagation();
...
}
and
<button class="delete-button" ng-click="remove($event)">Delete</button>
Demo: plnkr
For me, if I use both functions
$event.preventDefault();
$event.stopPropagation();
nothing happened at all. So I use only
$event.stopPropagation();
It works good.
I'm using Angular UI Router and I have a very simple:
<a href='#' ng-click="toggleCollapse()">
<i class="icon icon-triangle-down" ng-class="{'icon-triangle-down': !isCollapsed,
'icon-triangle-right': isCollapsed}"></i>
</a>
My function looks like:
$scope.toggleCollapse = ->
alert 'here'
console.log $scope.isCollapsed
$scope.isCollapsed = !$scope.isCollapsed
However, for some reason, my
$rootScope.$on '$stateChangeStart', (event, next, nextParams) ->
console.log event
gets triggered when I click the link. Is there any way to prevent it from triggering the $stateChangeStart?
this is because you have href='#' tag.
<a ng-click="toggleCollapse()">
<i class="icon icon-triangle-down" ng-class="{'icon-triangle-down': !isCollapsed,
'icon-triangle-right': isCollapsed}"></i>
</a>
remove href that and it wont trigger route change
For some reason AngularJS does not fire off the event when {{$index}} is used in ng-click.
My html:
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="foo in foos">
<label>{{foo.name}}</label>
X (doesnt work)
Remove first element (works)
</li>
</ul>
</div>
jsfiddle: http://jsfiddle.net/Lcasg/3/
Anyone knows how to fix this? Thanks
The value of the ng-click attribute is evaluated as an angular expression, so simply use remove($index).
solved!
<div ng-repeat="idiomax in textos.idiomas ">
<div class="idioma" ng-click="cambiaridioma($index)" ng-class="idioma != $index || 'idioma-activo'" >
{{idiomax.idioma}}
</div>
</div>
$scope.cambiaridioma = function (indice) {
$scope.idioma = indice;
}
I had to use $index in a string expression and this is how it worked:
HTML
<button ng-click="showUserStories($event, '#modal-id-prefix-' + $index)">Show Modal</button>
Script
$scope.showUserStories = function(event, modalId) {
$(modalId).modal("show");
event.stopPropagation();
}