0

I writing an application where cost of employees is calculated. User can add multiple member and input their cost and days for that I am using JQuery clone() function.

Also on the change of input I am binding ng-change funtion which for some reason doesn't work for the dynamically created elements.

You see the behaviour here: http://codepen.io/amigoo/pen/bepgQe

Faisal Ashfaq
  • 2,545
  • 4
  • 28
  • 41
  • Is there a reason you have to create the elements dynamicly? Why not use ng-if on the elements so they'll only be available under a condition. – Petter Pettersson Jun 13 '16 at 07:49
  • @PetterPettersson What if user wants to add 100+ members? – Faisal Ashfaq Jun 13 '16 at 07:57
  • may be help you http://stackoverflow.com/questions/32470928/angular-formly-adding-form-fields-dynamically-on-user-click/35603088#35603088 – Hadi J Jun 13 '16 at 07:58
  • @SSH But I would also like to know why ng-change is not working in my code. – Faisal Ashfaq Jun 13 '16 at 08:02
  • I think that you should compile html code that you add. and for this must use angular. – Hadi J Jun 13 '16 at 08:06
  • 4
    You've completely missed the point of angular, there is no need for all that jquery boilerplate code. The reason it's not working is because angular does not know about the elements jquery added. I suggest you read a little about angular. – Tomer Jun 13 '16 at 08:13

1 Answers1

0

You have compile your dynamically created elements like this, then only they will be updated in angular scope

var angularCloned = $compile($cloned)($scope);

and then append it to your parent

$(".add-member-section").append(angularCloned );
Pawan Nogariya
  • 8,330
  • 12
  • 52
  • 105