Add new text box on click of a button in angular js

Question

How do I add new text box when submit button is pushed. This is what I have tried and I know there's some thing wrong. I am still new to angular js.

Example:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example - example-ngController-production</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <script>
            angular.module('controllerAsExample', []).controller('SettingsController1', function ($scope) {

                $scope.contacts=[]
                $scope.addContact = function()
                {
                  $scope.contact.push({$scope.contact})
                }
            });
            };
        </script>
    </head>
    <body ng-app="controllerAsExample">
        <div id="ctrl-as-exmpl" ng-controller="SettingsController1">

            <ul>
                <li ng-repeat="contact in contacts">
                    <input type="text" ng-model="contact" />
                </li>
                <li><button ng-submit="addContact()">add</button></li>
            </ul>
        </div>
    </body>
</html>

Pankaj Parkar · Accepted Answer · 2015-06-14 12:25:06Z

2

You should replace your ng-submit with ng-click that will solve your problem And with that you need to change your object structure to persist a value, like you need to add contact number in contact object like contact.number

Markup

<ul>
    <li ng-repeat="contact in contacts">
      <input type="text" ng-model="contact.number" />
    </li>
    <li>
      <button type="button" ng-click="addContact()">add</button>
    </li>
</ul>

Code

angular.module('controllerAsExample', [])
.controller('SettingsController1', function($scope) {
  $scope.contacts = []
  $scope.addContact = function() {
    $scope.contacts.push({
    })
  }
});

Demo Plunkr

answered Jun 14, 2015 at 12:25

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3774047 Over a year ago

Please answer this one: stackoverflow.com/questions/30829370/…

Pankaj Parkar Over a year ago

@CodeSpark check I've added answer there..the approach which I suggested here has helped their..Anyways look at mine answer there

Visakh B Sujathan Over a year ago

it works.can you add a delete button to each element.

Abhishek Jain · Accepted Answer · 2015-06-14 21:39:49Z

1

In you code, you are doing:-

        $scope.addContact = function()
        {
          $scope.contact.push({$scope.contact})
        }

This is where the problem is. If you just need to add an empty textbox, you just need to add an empty contact to contacts, and ng-repeat will take care of adding the new textbox in the list. Another thing is that you were pushing into contact, and not contacts.

Also, ngSubmit is used inside a form, which you do not have. So, use ng-click instead. Here is a plunker showing the code working.

            $scope.addContact = function()
            {
              $scope.contacts.push({ name: '' });
            }

edited Jun 14, 2015 at 21:39

answered Jun 14, 2015 at 11:02

Abhishek Jain

2,97724 silver badges35 bronze badges

4 Comments

user3774047 Over a year ago

What is track by index$ which you have added to the code?

Abhishek Jain Over a year ago

if you don't do track by $index, you will get the error - Duplicates in a repeater are not allowed, because duplicate keys are not allowed in ngRepeat. By saying track by $index, it is giving each item a unique key, $index. For more information, see here - docs.angularjs.org/error/ngRepeat/…

Pankaj Parkar Over a year ago

@AbhishekJain does it really persist a value..?

Abhishek Jain Over a year ago

@CodeSpark, my original solution won't persist the value. To make it persist, you will have to add the contact as an object, and not a primitive type. I have edited my answer and the plunker demonstrating this.

Collectives™ on Stack Overflow

Add new text box on click of a button in angular js

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related