How to add new field when button is clicked multiple times by using angularjs

Question

I'm trying to add fields multiple times up on clicking the buttons , they r nested each other..what i am trying to do as shown in the picture

html code :

<body ng-controller="myController">
<form name="{{form.name}}" ng-repeat="form in forms">
<div ng-repeat="cont in form.contacts">
        <select>
        <option>--select machine--</option>
        <option>data1</option>
        <option>data2</option>
        </select>
        <div class="data">          
        <button class="add_s" ng-click = "add()">Add more</button>
        </div>
      </div>
      <button ng-click="addFields(form)">Add</button>
       </body>

angularjs code:

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.forms = [{ }];
$scope.addFields = function (form) {
if(typeof form.contacts === 'undefined') {
form.contacts = [];
 }
form.contacts.push('');
}   
$scope.add = function(){
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".data"); //Fields wrapper
        var add_button      = $(".add_s"); //Add button ID
        var y=1;
        var x = 1;//initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
              $(wrapper).prepend('<div><select><option>--select--</option><option>data1.1</option><option>data1.2</option></select><input type="text"><input type="text"><input type="text"><input type="text"><a href="#" class="remove_field"><i class="glyphicon glyphicon-trash"></i></a></div>'); 

            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text                                                                                                                                                     
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

}
 });

error: if i click on add button i m getting only one time the above div tag is repeating, but i want that should repeat for many times, and when i am clicking add more button data with in the 2nd div tag should repeat. but its happening..:( ..

please help.. thank u in advance.

You are thinking like jQuery, that is not how angularJS works. Take a look at this to learn more. http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Klante, Feb 05 '16 at 10:19
Do not mix Jquery and AngularJs. AngularJS is strong enough to handle those click event that you created with Jquery. — Partha Sarathi Ghosh, Feb 05 '16 at 10:28
As stated above you shouldn't really use jQuery together with AngularJS unless really needed as they have different approaches. Honestly it doesn't look like it's needed that much in your case. By the way one way to solve it is to bind data into an array and use the Add button to push new elements into it. You could display existing elements with `ng-repeats` — Alessandro Cifani, Feb 05 '16 at 10:29

score 0 · Answer 1 · answered Feb 05 '16 at 10:37

Use this code. Here is the plunker.

$scope.forms = [];
$scope.addForms = function () {
   $scope.forms.push({contacts : []});
};
$scope.addContact = function (form) {
  form.contacts.push({});
};

View

<form name="{{form.name}}" ng-repeat="form in forms" style="border:1px solid red">
        New Form 
        <div ng-repeat="cont in form.contacts">
            <select>
              <option>--select machine--</option>
              <option>data1</option>
              <option>data2</option>
            </select>
        </div>
        <div class="data">    <!-- Move this out of contacts -->      
            <button class="add_s" ng-click = "addContact(form)">Add more</button>
          </div>
        </form><!--You have unclosed form tag -->
      <button ng-click="addForms()">Add</button>

Zonedark · Answer 2 · 2016-02-05T10:58:05.883

Here's my take on your problem and how I'd do it :

    <div ng-controller="MyCtrl">
  <button ng-click="addBloc()">
    Add bloc
  </button>
  <div ng-repeat="bloc in blocs">
    <div>
      <button ng-click="addNewField($index)">
        Add field
      </button>
    </div>
    <div ng-repeat="field in bloc.fields">
      <select ng-model="field.gender">
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
      <input type="text" ng-model="field.FirstName">
      <input type="text" ng-model="field.LastName"> {{field.gender}} {{field.FirstName}} {{field.LastName}}
    </div>
  </div>

</div>

And controller :

 $scope.blocs = [];
  $scope.fields = [];
  $scope.addNewField = function(index) {
  alert(index);
    $scope.blocs[index].fields.push({
      gender: "",
      FirstName: "",
      LastName: ""
    });
  };
  $scope.addBloc = function() {
    $scope.blocs.push({
      fields: []
    });

Working JSFiddle : JSFIDDLE

Basic idea is to put your fields inside a ng-repeat and bind it to an empty array. When you click the button it adds an empty element inside the array which will be binded to a new element of the ng-repeat automatically.

Happy coding!

EDIT : I added another level of repeated fields as previously asked since I forgot to read the entire request.

this i m getting.. but my problem is different.. i need to get one more button inside add more button.. wen i click on that i need to get a drop down box (select tag) along with the input boxes. — suma, Feb 05 '16 at 10:49
Add an array level inside your controller. Check my JSFIDDLE, I just updated it with what you wanted! — Zonedark, Feb 05 '16 at 10:56

How to add new field when button is clicked multiple times by using angularjs

2 Answers2