Pass a reference to DOM object with ng-click

AngularjsAngularjs Ng-Click

Angularjs Problem Overview

I have multiple elements with the same callback on ng-click:

<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>



// In controller:
$scope.doSomething = function() {
  // How do I get a reference to the button that triggered the function?
};

How can I get the reference to the object which made the call to doSomething? (I need to remove an attr from it)

Angularjs Solutions

Solution 1 - Angularjs

While you do the following, technically speaking:

<button ng-click="doSomething($event)"></button>



// In controller:
$scope.doSomething = function($event) {
  //reference to the button that triggered the function:
  $event.target
};

This is probably something you don't want to do as AngularJS philosophy is to focus on model manipulation and let AngularJS do the rendering (based on hints from the declarative UI). Manipulating DOM elements and attributes from a controller is a big no-no in AngularJS world.

You might check this answer for more info: https://stackoverflow.com/a/12431211/1418796

Solution 2 - Angularjs

The angular way is shown in the angular docs :)

https://docs.angularjs.org/api/ng/directive/ngReadonly

Here is the example they use:

<body>
    Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
    <input type="text" ng-readonly="checked" value="I'm Angular"/>
</body>

Basically the angular way is to create a model object that will hold whether or not the input should be readonly and then set that model object accordingly. The beauty of angular is that most of the time you don't need to do any dom manipulation. You just have angular render the view they way your model is set (let angular do the dom manipulation for you and keep your code clean).

So basically in your case you would want to do something like below or check out this working example.

<button ng-click="isInput1ReadOnly = !isInput1ReadOnly">Click Me</button>
<input type="text" ng-readonly="isInput1ReadOnly" value="Angular Rules!"/>
Categories
Recommended Angularjs Solutions
Recommended Angularjs Ng-Click Solutions

Previous Solution:

Create zip file from byte[]

C#.Netasp.net MvcZip.Net 4.5

Next Solution:

After update to Xcode 5 - ld: symbol(s) not found for architecture armv7 or armv7s linker error

CordovaStatic LibrariesCpu ArchitectureIos7Xcode5

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjviottiView Question on Stackoverflow
Solution 1 - Angularjspkozlowski.opensourceView Answer on Stackoverflow
Solution 2 - Angularjstesting123View Answer on Stackoverflow