Ways to access a clicked element using AngularJS with ngClick

I am attempting to dynamically add a class to an element when it is clicked using AngularJS. The element is generated through ngRepeat, and I need to determine which specific element was clicked by utilizing the ng-click="foo()" directive.

Here is a snippet of the code (note: the controller and app call are omitted for brevity):

function campaign_list_controller($http) {
  this.open_options = function(elem) {
    console.log(elem);
  }
}
<div class="action_select">
  <div class="option" ng-click="ctrl.open_options()">Actions</div>
</div>

javascriptangularjsangularjs-ng-click

Answer №1

Try using this code, it should work perfectly for your needs.

function view_controller($http) {
  this.show_content = function($event) {
    angular.element($event.target).css("background-color", "blue");
  }
}
<div class="content_display">
  <div class="section" ng-click="ctrl.show_content($event)">View Content</div>
</div>

Answer №2

Implement the following method: - 

<button class="menu-btn" on-click="app.open_menu(this)">Menu</button>

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

How can labels be added when mapping over JSON data?

If I have JSON data structured like this: { "siteCode": "S01", "modelCode": "M001", "modelDesc": "Desc01", "price": 100 "status": "A", "startDate": "Ma ...

javascriptnode.jsjsonexpressdictionary

Placing content inside a text area upon clicking a div element

I am currently developing a submission system and I want to implement a feature where clicking on a div will insert certain text (like [b][/b]). Here is an example of what we are working with: <div class="insertBBC" title="Bold Text" onClick="moveNumbe ...

javascriptphphtmltextfield

What is the best way to pass multiple row values in a form field using AngularJS to a web API?

Is it possible to insert multiple row values in an AngularJS controller using a web api? <tr ng-repeat="rt in xxtt"> <td> <input type="text" class="form-control" ng-model="rt.name" required /> </td> <td> ...

javascriptangularjsasp.net-web-api2

How do I extract elements from an array?

I'm working with an array of objects: var aoo = [{},{},{},....{},{},{}]; I am looking for an efficient function that can retrieve elements from index n to m. For example: var getEl = function(from, to) { ... return array } What is the best way to ...

javascript

Having trouble showing the success message following row edits in jqgrid

I'm currently developing a web-based application with Bootstrap and I'm facing a challenge with implementing inline editing in my grid upon page load. The issue arises when displaying the success or failure message after performing an edit functi ...

javascriptjquerytwitter-bootstrapjqgrid

Struggling to make HTML5 validation function properly

I'm struggling to make HTML5 validation work in conjunction with AngularJS. Instead of displaying the error message, the form is submitted even when a field is required. If anyone has any insights on how to successfully implement HTML5 validation wi ...

angularjshtmlvalidation

How can Selenium be used to identify an Internet Explorer browser extension?

Can Selenium be used to detect internet explorer browser plugins? For example, if I open a URL on IE and want to check for any installed plugins, is there a way to automate this with selenium? ...

javascriptseleniumselenium-webdriver

What is the best way to remove an exported JavaScript file from Node.js?

In my Node.js library package called "OasisLib," there is a file named TypeGenerator.ts. The specific logic within the file is not crucial, but it requires access to files in the filesystem during the project build process. To achieve this, we utilized let ...

javascriptreactjsnode.jstypescript

Tips for retrieving information from a PHP website that is JSON-encoded?

Hey, I've been racking my brain trying to solve this problem for hours but still no luck. ...

phpangularjsjsonionic-framework

Iterating through two classes in a Javascript loop

Hello, I'm facing a small obstacle that I'm hoping to overcome using JavaScript/jquery. Essentially, I have multiple div classes and I want to create a loop that adds a class to specific divs without manually assigning an id to each one. The goal ...

javascriptjqueryhtmlcss

Utilizing jQuery for customizing application.master pages within SharePoint

In our intranet, we utilize MOSS 2007 (SharePoint) for the platform. Recently, we were assigned with the task of managing branding for multiple companies on our farm. We noticed that the application pages, generated by a modified application.master file, c ...

javascriptjquerysharepointintranetbranding

Transform nested properties of an object into a new data type

I created a versatile function that recursively converts nested property values into numbers: type CastToNumber<T> = T extends string ? number : { [K in keyof T]: CastToNumber<T[K]> }; type StringMap = { [key: string]: any }; const castOb ...

javascripttypescriptrecursion

Accessing External Sites Remotely: A Guide to Logging in with Wix

I currently have a Wix website along with a customer portal hosted on a separate platform. My goal is for customers to seamlessly log in to my website and be redirected straight to the customer portal without encountering an additional login screen. Behin ...

javascriptnode.jswixvelo

AngularJS restricts the display of elements to only 4 using the limitTo filter

I'm facing an issue with my filters. I have a JSON dataset that I need to display on my website, but I only want to show 4 elements that meet a certain criteria. Here's the code snippet: <div ng-repeat="place in places | limitTo: 4 | filter: ...

javascriptangularjsjsonangularjs-ng-repeatfiltering

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

javascriptjqueryhtmlcss

Calculate the total value of each individual subject from the checkbox's data-id, presented in a string format and separated by commas

<div> <input type="checkbox" id="Q_1_ck1" value="R" data-id="Environmental Science, Physical Education, Agriculture, Yoga, "> <label class="custom-control-label" for="Q_1_ck1"> ...

javascriptjquery

Angular prevents the page from reloading when using `$window.location`

I'm facing an issue while trying to refresh my admin page using Angular. I've come across $window.location.reload() and $route.reload(). I attempted to use $window.location.reload() by injecting $window into the function parameters. scope.uploadL ...

javascriptangularjs

Modify the text on a button using vanilla JavaScript

Although it may seem like a simple question, I am struggling to change the text on my button. The code for my button in the web browser console is: <button class="nav-link active" id="coholder-tab" data-toggle="tab" data-t ...

javascriptvue.jsdomaddeventlistenerjsdom

Developing a Voting System in CodeIgniter

Currently, I am working on implementing a voting system in my CodeIgniter project called "like". I came across a method on and followed it. After successfully updating the database, I faced an issue where the like count was not displaying on the view. In ...

javascriptphpjquerycodeigniter

Exploring a different method for implementing animations during UI-router state transitions

My product owner presented me with a seemingly impossible challenge to create animations between states. I utilized ngAnimate and thought I had a brilliant solution - only to be told it wasn't what they wanted. "This isn't what I had in mind," h ...

javascriptangularjsanimationangularjs-directiveangular-ui-router