How do I select "this" in angular?

Question

I have 5 buttons using the same ng-click function. Basically each of the buttons operate similarly to a tabbed navigation, where you click one of the buttons and it takes you to that tab's pane. Each of these buttons can be repeatable and are housed in a template. The tab panes are also all in a template but aren't all active until a user clicks one of the buttons and creates a page. So basically there are multiple click functions nested within click functions that do different things depending on what user has activated.

In jQuery, I could just use "this" and select the object that was clicked and do all my manipulations to that object easily; however, it doesn't appear there's a way to do that using just angular. Currently, when you click one of these buttons it does the same thing to all of them. I figure I could create 5 separate functions, but I don't want to do that for scalability reasons.

So to summaraize:

Is there a way to select "this" in Angular?
I'd like a solution that is just using Angular and no jQuery

Is there an efficient way of dealing with click functions within click functions?

<nav class="block--menu">
<section class="content--menu" ng-controller="ActiveCtrl">
    <div class="menu" >
        <button  class="menu__item" ng-click="showConfirm()"></button>
        <button  class="menu__item" ng-click="showConfirm()"></button>
        <button  class="menu__item" ng-click="showConfirm()"></button>
        <button  class="menu__item" ng-click="showConfirm()"></button>
        <button  class="menu__item" ng-click="showConfirm()"></button>
    </div>
</section>

`I'd like a solution that is just using Angular and no jQuery` nobody is going to do your job for you. Show us your progress so we can help you. — ODelibalta, Aug 18 '15 at 15:59
If you regularly need access to the element in your controller code, you're writing angular incorrectly. You should consider writing a directive where the element is already established, which would give you whatever you might need. — David L, Aug 18 '15 at 16:04
example has been added. I had trouble getting it to show when I originally posted. I'm not expecting anyone to write it for me, but I also can't write something I don't know how to do. — jmur, Aug 18 '15 at 16:06
@jmur you still haven't shown that you are actually trying to accomplish! In what way are you manipulating what elements? — David L, Aug 18 '15 at 16:06
@jmur, you might benefit from reading this [How to think in Angular](http://stackoverflow.com/a/15012542/968155) answer - it describes how to make the app model-driven - it's quite rare that one would need the DOM object in the controller — New Dev, Aug 18 '15 at 16:24

score 2 · Answer 1 · edited May 23 '17 at 12:22

2

You can access jQuery event object using $event in angular events check the documentation for details but if you are sending that to your controller it most likely means you are not doing it in angular way.

the usage is

<button  class="menu__item" ng-click="showConfirm($event)"></button>

and in the controller

$scope.showConfirm = function($event){
    //$event.target should be your link
};

edited May 23 '17 at 12:22

Community

1
1

answered Aug 18 '15 at 16:03

Onur Topal

3,042
1
24
41

2

This isn't an answer. – New Dev Aug 18 '15 at 16:04
Good... but `this` is actually not `$event` - `this` is the scope object, i.e. `showConfirm(this)` sends the scope object to the function - so that statement is incorrect – New Dev Aug 18 '15 at 16:10
what the OP meant was this in jquery events not this in angular. "In jQuery, I could just use "this" and select the object that was clicked" – Onur Topal Aug 18 '15 at 16:11
Perhaps... I would suggest rephrasing to avoid confusing – New Dev Aug 18 '15 at 16:12
@NewDev how about now? – Onur Topal Aug 18 '15 at 16:14

score 1 · Accepted Answer · answered Aug 18 '15 at 16:47

You should stop thinking in a jQuery way and don't try to manipulate the DOM directly. In your controller you should only manipulate the data, which is then reflected in the view. When you think Angular-way, your code usually looks as follows:

HTML

<section ng-controller="ActiveCtrl as ctrl">
    <div class="menu" >
        <button ng-repeat="button in ctrl.buttons track by $index"
                ng-click="ctrl.showConfirm(button)"
                ng-class="{'menu__item_active':button.active, 'menu__item':true}"
        >{{button.name}}</button>
    </div>
</section>

JavaScript

angular.module('app',[]).
  controller('ActiveCtrl', ['$window', function($window) {
    this.buttons = [{
      name: 'First'
    }, {
      name: 'Second'
    }, {
      name: 'Third'
    }];
    this.showConfirm = function(button) {
      button.active = !button.active;
      $window.alert(button.name);
    }
  }]);

Plunker

http://plnkr.co/edit/Dg10cXqFxEKgEt7jWQ7Z?p=preview

This was a lot more inline with what I was thinking. This definitely gave me enough to get started. Thank you! — jmur, Aug 19 '15 at 04:21

How do I select "this" in angular?

2 Answers2