0

in my app I'm trying I'm building a shopping cart. You can see the app in this codepen: http://codepen.io/summerfreeze/pen/VjqJYW. It's almost working, but I'm struggling with the last part. I want the "ADD ORDER LINE" button to add another order lines under the existing one. I'm trying to do this using jQuery:

  myApp.directive('myDirective', function($scope) {
    $scope.addline = function() {
      $(".orderline").clone().appendTo('.main');
    };
    return addline();
  });

But this doesn't seem to work. I would be grateful if someone would look at the code and tell me what mistake did I make.

isherwood
  • 58,414
  • 16
  • 114
  • 157
summerfreeze
  • 237
  • 1
  • 3
  • 14

2 Answers2

1

Not sure why you were using a directive. I removed that from your code and it works. You still have other errors, but I'm guessing you can attend to those. Here's the link to the modified version

new codepen version

   $scope.addline = function(){
    $(".orderline").clone().appendTo('.main');
  };

As the others suggested, in order to follow clean code standards, please refrain from using jQuery code in AngularJS, in time it will lead to problems.

Marius P.
  • 322
  • 6
  • 13
  • I will surely learn to do this with Angular soon, thank you. Your code does work, but please click few times and see how many divs it adds. It multiplies. How to avoid that? – summerfreeze Aug 15 '16 at 21:09
  • 1
    use the ".first()" function from jquery `$(".orderline").first().clone().appendTo('.main');` – Marius P. Aug 15 '16 at 21:12
  • the cloned input lements don't work as the original one (no autocomplete etc) – summerfreeze Aug 15 '16 at 21:36
  • Yes, that's why you need to rethink the approach in an Angular way, cloned elements are not really dynamic. Do more Angular exercises/examples until you understand the basics and then you can apply them in your project. – Marius P. Aug 16 '16 at 07:53
  • http://codepen.io/summerfreeze/pen/VjqJYW trying to do that in Angular, bit i'm lost – summerfreeze Aug 16 '16 at 08:19
0

From what I can tell, you shouldn't be appending to #main, but to #main div[0]

Buddy
  • 10,874
  • 5
  • 41
  • 58
Xavier J
  • 4,326
  • 1
  • 14
  • 25