StopPropagation() method in Ng-class not functioning properly in Angular for parent element

I am facing an issue with 2 nested ng-repeats. The parent one is supposed to add a class based on ng-click, but even when I click the child, it still triggers when I don't want it to.

<div class="add-filter-tags" data-filter="{{f1}}" ng-class="{'tag_selected' : tag_selected }" ng-repeat="(f1,f2) in filters" ng-click="tag_selected = !tag_selected;">
            <span>{{f1}}</span>             
        <div class="add-filter-tags sub-filter-tag"  data-filter="{{f1_2}}"  ng-click="$parent.$event.stopPropagation()" ng-repeat="(f1_2,f2_2) in filters[f1]" sibs ><span>{{f1_2}}</span></div>

</div>

UPDATE: I have already attempted removing $parent but the issue persists.

javascriptangularjs

Answer №1

To prevent event propagation from the child element to the parent element, you can use the $event.stopPropagation() method in AngularJS. This will ensure that the event does not bubble up, and the $event object will not be attached to the $parent. It is a special argument used with the ng-click directive.

 ng-click="$event.stopPropagation()"


angular.module('app', []).controller('ctrl', function($scope) {

});
.tag_selected {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="add-filter-tags" ng-class="{'tag_selected' : tag_selected }" ng-if="true" ng-click="tag_selected = !tag_selected;">
    <span>Parent</span> 
    <div class="add-filter-tags sub-filter-tag" ng-click="$event.stopPropagation()" ng-if="true"><span>Child</span>
    </div>

  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Testing the functionality of javascript/jQuery events using Jasmine`

I came across this code snippet: $(document).on('click', '#clear-button', clearCalculatedPrice) clearCalculatedPrice = -> $('#price_rule').removeAttr('data-original-title') $('#calculated-price&apos ...

javascriptjqueryunit-testingcoffeescriptjasmine

There is an issue with the function of elem.autocomplete - it is not recognized

I'm new to Angular.JS and have been struggling for the past 6 hours. I've been working on reading data from an HTTP source and displaying it as an autocomplete feature on the view. Previously, the data was displayed in a select box, but I decide ...

javascriptjqueryangularjsautocomplete

Dispatch is functioning properly, however the state remains unchanged

I'm currently developing an application that utilizes redux for state management. In a particular scenario, I need to update the state. Here is how my initial state and reducer function are set up: import { createSlice } from '@reduxjs/toolkit&a ...

javascriptreactjsredux

Determine the overall width of a JSX element

Is there a way to retrieve the width of a JSX.Element? In a traditional setup, I would typically use something like: const button = document.createElement('button'); document.body.appendChild(button) window.getComputedStyle(button).width However ...

javascriptreactjs

Check to see if there is a value present in a JavaScript array

I am trying to validate the content of the data array in the code below. My goal is to ensure that when a user enters a packageid (a variable in the code), and if that packageid does not exist, the "else" statement in the conditional should be triggered. ...

javascriptjqueryif-statement

Navigating through AngularJS routes with a Resolver

Can you explain the role of a route resolver in AngularJS? Is there a way to verify if the user is logged in by utilizing a $http Ajax request with the resolver before switching routes? ...

angularjsroutes

Hidden form in JavaScript does not submit upon clicking the text

My previous question was similar to this but with a smaller example. However, the issue with that code differs from my current code. (If you're curious, here's my previous question: JavaScript Text not submitting form) Currently working on my fi ...

javascriptphpjqueryhtmlforms

Learn how to find and filter elements in arrays that do not include a particular value using React

In my collection of recipes, I have the ability to filter out the ones that include specific ingredients. However, when I attempt to reverse this process by using .some method, it only checks the first item in the array. Here is an example of my data stru ...

javascriptreactjsfilter

Is there a javascript file storing an image?

Currently, I am in the process of creating my personal portfolio website and incorporating react-bootstrap for designing my react components. I have been attempting to add an image using the Image component provided by react-bootstrap. However, I noticed ...

javascriptreactjsimageecmascript-6

Crafting personalized objects from an array

In the process of creating an object from an array, I am faced with a dilemma. The elements in the array are as follows: var arr = [ 'find({ qty: { $lt: 20 } } )', 'limit(5)', 'skip(0)' ] Despite my efforts, my code is ...

javascriptarraysjsonnode.js

angular interceptor is not disapproved

$resource makes an API call. If it receives a certain flag, the request will fall into the .catch() section of $resource('api/').get(...).$promise.catch(); My interceptor doesn't trigger that call. It always calls .then regardless. Interce ...

angularjsangular-http-interceptors

Is it recommended to add the identical library to multiple iFrames?

Here's a quick question I have. So, my JSP page has 4 different iFrames and I've included JQuery UI libraries in it: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://c ...

javascriptjqueryhtmljspiframe

Having trouble with the chaining of AJAX calls using Promises?

I am currently attempting to send a POST request (technically a DELETE) to a php page called delete_post.ajax.php. This request takes data from my AJAX call and utilizes it to delete an item from the database. After deletion, I want my AJAX to then send a ...

javascriptphpajaxpromise

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

Seeking assistance on a search functionality issue. I am able to filter search results from a list retrieved from the database and displayed on an HTML page, but facing difficulty in getting complete search results from the controller. When clicking the se ...

javascripthtmlangularjs

Avoiding GulpJs freezing with effective error handling techniques

I am currently in the process of converting my sass files to css and encountering some issues. Specifically, I am struggling with handling errors during the sass conversion process. Whenever there is an error, it causes gulp to hang, requiring me to rest ...

javascriptgulpbuild-system

After utilizing Geolocation, the input fields in Ionic/Angular JS are failing to update accurately

Currently, I am in the process of developing a new App using Ionic and Angular JS. Specifically, in one of the app tabs, I am utilizing geolocation to populate four fields (street name, street number, latitude, and longitude). Below is the snippet of my c ...

javascriptangularjsionic-frameworkngcordova

invoking an API within a map function and utilizing the response

vm.owners = parents.children.map(function(e) { getparentById(e.Id) .then(function(getresponse) { var parentLink = '<a href="/#/parent/onboard/' + e.Id + '" target="_blank">' + e.Number + "-&qu ...

javascriptangularjstypescript

jquery: conditions fail to execute

Looking at the code snippet provided, it appears quite straightforward. The intention is to display an alert labeled "Trigger 2" if the variable "ret" returns a value of "fail". However, there seems to be a glitch with the IF statement causing it to trigge ...

javascriptjqueryajaxif-statement

Turn off scrolling for the body content without removing the scrollbar visibility

Whenever I click a thumbnail, a div overlay box appears on top: .view-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; overflow-y:scroll; background-color:rgba(0,0,0,0.7); z-index:999; } Some browsers with non-f ...

javascriptjqueryhtmlcss

Ensure that the modal remains open in the event of a triggered keydown action, preventing it from automatically closing

I am currently toggling the visibility of some modals by adjusting their CSS properties. I would like them to remain displayed until there is no user interaction for a period of 3 seconds. Is there a way to achieve this using JavaScript? Preferably with Vu ...

javascriptcssvue.js