0

I'm trying to make a dynamic form with AngularJS and JavaScript. The objective is to add how many inputs the user need and transform all those inputs in AngularJS variables that print it on body. So I got that code:

$(function(){
   var number = 1;
   $('a.add').click(function(e){
      e.preventDefault();
      $('#this_div_contains_settings').append('<input type="text" name="example'+number+'" ng-model="example'+number+'" placeholder="Anything">');
      number++;
   });
   $('#this_div_contains_settings').on('click','a.design_button', function(e){
      e.preventDefault();
      $(this).parent().remove();
   });
});

This function add a INPUT on my DIV with the different ng-model every time it run.

The problem is, it just work's if the {{example1}} is already on my BODY, if I add it later with another function, it just doesn't work.

I'm new with AngularJS, so I didn't understand if I need to "refresh" the AngularJS everytime I add new variable or something like that.

Any help will be appreciated :)

doniyor
  • 36,596
  • 57
  • 175
  • 260
euDennis
  • 327
  • 2
  • 7
  • 16
  • This is totally wrong, even if it could be answered it shouldn't be done. You should be using only angular and not JQUERY to meet your requirements – Dalorzo Aug 01 '14 at 16:58
  • while working with angular, avoid using jquery... – harishr Aug 01 '14 at 17:07
  • nope, not gonna answer this question... – Alex C Aug 01 '14 at 17:08
  • Please read this: How do I “think in AngularJS” if I have a jQuery background? http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background – Steve Sanders Aug 01 '14 at 17:09
  • @SteveSanders' comment is the correct answer and should be up-voted if made as an actual answer. It's actually possible to answer this question, but it's also pointless. Angular has no value if you're going to wire these things up the "old way" anyway. – Chad Robinson Aug 01 '14 at 17:17
  • Sorry, I didn't know that is not recommended to use AngularJS with Jquery, as I stated before, I'm newbee at AngularJS. I will try to improve that. – euDennis Aug 01 '14 at 21:58

1 Answers1

3

Using jQuery is the wrong way to solve this problem. Instead, create an array inside of your controller that will hold the models for all of these inputs.

Depending on how you define/create your controllers, $scope may be replaced with this

$scope.examples = [];

Next, create a function that will add a new example to the array:

$scope.addExample = function () {
    $scope.examples.push("");
}

Now, in your template, create the inputs using an ng-repeat:

<div id="this_div_contains_settings">
    <input ng-repeat="example in examples" type="text" name="example" ng-model="example" placeholder="Anything">
</div>

and have your "add" button call your addExample function on click:

<a class="add" ng-click="addExample()">Add Example</a>

Finally, remove all of the code that was included in your question.

And for your .design_button that removes all the examples, that's easy too:

<a class="design_button" ng-click="examples = []">remove all examples!</a>

by that same concept, you could even remove the need for the addExample function, however i tend to keep logic in the controller (well, actually in the services, but that's another topic) anyway rather than putting it in the template.

Kevin B
  • 94,570
  • 16
  • 163
  • 180