AngularJS : DOM manipulation of ng-repeat elements in a directive

Question

I am new to angularJS. I am trying to implement the a simple functionality wherein there are a number of checkbox options and one specific function needs to be called on click of these checkbox options something similar to

 $(parentDiv).on("click",'input[type="checkbox"]', functionToBeCalled});

I am trying to use a directive for this section with content similar to

 <div>
    <span ng-repeat="subsection in section"><input type="checkbox"  value="subsection.name"></input> {{subsection.name}} </span>
</div>

Directory

app.directive('myDir', function() {
  return {
    restrict: 'AE',
    replace: true,
    templateUrl: 'filter.html',
    link: function(scope, elem, attrs) {
      elem.find("input").bind('click', function() {
        //do some data manipulation
      });
    });
 };
});

When i use the link function I find that if I use elem.find('input[type="checkbox"]) gives me an empty object so it is not compiled before that. Kindly let me know how to address this situation. I did a bit of a research and found out about compile function which manipulates DOM before linking,but i am not able to think of the approach ahead. Any help will be appreciated. Thanks in advance.

Sudharsan S · Accepted Answer · 2015-05-15 10:14:34Z

1

Use ngClick or ngChange Directive inn angularjs

<div>
    <span ng-repeat="subsection in section">
    <input type="checkbox"  value="subsection.name" ng-click="myFunc(subsection.name)" /> {{filter.name}} </span>
</div>

here in the example i used ng-click = "myFunc" and pased the value in that function

answered May 15, 2015 at 10:14

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

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

2 Comments

user1776573 Over a year ago

The problem is I have ten such sections each of which has more than five checkboxes on click of which the same function gets executed. I did not want to use ng-click on all ten sections.I wanted to know if a generic solution for this case is possible.

user1776573 Over a year ago

I thnk i am not clear on what I am trying to say. Please refer the below fiddle jsfiddle.net/uidev_26/cmbj92c1/4/.All I want to do is call the function once instead of calling for each section.

Dan Moldovan · Accepted Answer · 2015-05-15 10:10:07Z

0

It might help for us to know how you directive looks like and specifically what element that directive is attached to, since you're speaking about elem.

Nevertheless, if you just need functions to be called when the checkbox is clicked, you can use built-in angular functions for this:

answered May 15, 2015 at 10:10

Dan Moldovan

3,5912 gold badges16 silver badges24 bronze badges

1 Comment

user1776573 Over a year ago

Added the same. I am using something like <div mydir></div>

Collectives™ on Stack Overflow

AngularJS : DOM manipulation of ng-repeat elements in a directive

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related