0

I wanted to add row dynamically to my table.

For this I used jquery syntax.

But after this my scope from this newly added row is lost. I am not able to do any functionality on the same.

Not sure what could be the possible reason.

Ashish_B
  • 114
  • 1
  • 9
  • 2
    Google for event delegation and modify the handlers accordingly. – Milind Anantwar May 07 '15 at 14:17
  • 1
    Without posting example code, we could guess a thousand things that are happening wrong. Also, why would you use jQuery to add a row when you could do it with Angular very easily (using ng-repeats through your model) ? – Mark Pieszak - Trilon.io May 07 '15 at 14:24
  • Not a duplicate but I believe this [answer](http://stackoverflow.com/questions/30103156/what-is-use-of-delegate-that-i-am-not-able-to-distinguish) by @dekkard fits this situation perfectly – Trucktech May 07 '15 at 14:28
  • add some code so that you will get accurate answer – Pankaj Parkar May 07 '15 at 14:38

3 Answers3

0

Try catch you row into some variable:

var row = $('<tr></tr>').appendTo('tbody')
row.click(function(){ alert('hello') })
/* or try bind some event to row */
row.bind('click',function(){ alert('hello!') })
Alex
  • 381
  • 4
  • 14
0

See the angular FAQs on DOM Manipulation and, directly underneath that, Trying to duplicate functionality that already exists.

You should not use jQuery to create the new rows, because this just adds elements to the DOM - Angular will not know about them and so they will not be given a scope. If you aren't careful, the new rows may even get removed when Angular does an update of the scope.

Instead you should use the functionality that Angular gives you, most likely in your case the ng-repeat directive. This is a pretty standard use case:

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.ID}}</td>
            <td>{{user.Name}}</td>
            <td><button ng-click="DoSomething(user)">Do Something</button></td>
        </tr>
    </tbody>
</table>

In this example, instead of creating the new row, you would add a new object to your scope.users array.

If you want to do some non-DOM action, such as dynamically binding a click event to an element to show an alert, it is still OK to use jQuery if you really prefer to because it does not change the state of your application.

Rhumborl
  • 16,349
  • 4
  • 39
  • 45
0

Yes its done now.. What I needed to do is to use $compile

I compiled my newly added row along with existing html scope.

And guess what it worked like charm. :)

Ashish_B
  • 114
  • 1
  • 9