bind click event to the element in ng-repeat angular

Question

I have menu and use ng-repeat for loop to the my category and in this loop i have a link tag and I want to when clicked on this link do something in js file. But I can't access to the tag a in javascript and add click event to this element.

Here is my ng-repeat code:

<li class="has-children" ng-repeat="category in categories  |filter:{ level: 1 } : true" ng-if="$index < 5">
    <a class="parent-link">{{category.categoryName}}</a>
    <ul class="is-hidden">
        <li class="go-back"><a>{{category.categoryName}}</a></li>
        <li ng-repeat="submenu in categories |filter:{ parentID: category.categoryID } : true"><a>{{submenu.categoryName}}</a></li>
    </ul>
</li>

Here is my js file (this code doesn't fire):

$(".parent-link").on("click", function(e) {
  console.log("clicked");
  e.prenvetDefault()
});

if you are using Angular JS, why not use ng-click?

Rajesh Dixit
– Rajesh Dixit

2016-06-12 05:52:33 +00:00
Commented Jun 12, 2016 at 5:52 — Rajesh Dixit
– Rajesh Dixit, Commented Jun 12, 2016 at 5:52

Łukasz · Accepted Answer · 2016-06-12 06:01:46Z

2

Use ng-click. It can be used as attribute of element. Example usage:

HTML:

<div ng-click="changeWord()">
   {{word}}
</div>

Controller:

$scope.changeWord = function () {
    $scope.word = 'I am changed';
}

See http://jsfiddle.net/ax6k3z1e/

answered Jun 12, 2016 at 6:01

Łukasz

2,1711 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek Pratap Singh · Accepted Answer · 2016-06-12 05:58:33Z

1

Possible reason could be that you Javascript is getting executed before the DOM is ready. You should use ng-click as It's good to build through Angular way when you are using AngularJS in you application.

answered Jun 12, 2016 at 5:58

Vivek Pratap Singh

10.1k5 gold badges24 silver badges35 bronze badges

Comments

Himanshu Jain · Accepted Answer · 2016-06-12 06:50:33Z

0

ng-Repeat have the tendency to bind your iterating object as well. Below is the example for the same.

<div ng-repeat='ele in elements'>
<p ng-click='ShowAlert(ele)'>{{ele.name}}</p>
</div>

Specify below mentioned code in your linked controller.

$scope.ShowAlert=function(element){
alert(element.Name);
}

answered Jun 12, 2016 at 6:50

Himanshu Jain

5384 silver badges21 bronze badges

Collectives™ on Stack Overflow

bind click event to the element in ng-repeat angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related