Implementing dynamic addition and removal functionality in AngularJS using ng-repeat and ng-model

Question

Implementing dynamic addition and removal functionality in AngularJS using ng-repeat and ng-model

In the process of creating a dynamic form with add/remove functionality, I experimented with utilizing ng-model within ng-repeat. Here is an example of what my code entails:

<button ng-click='add()'>Add more</button>
<div ng-repeat='x in array track by $index'>
    <input ng-model='array[$index].name'></input>
    <input ng-model='array[$index].phone'></input>
    <input ng-model='array[$index].email'></input>
</div>

//angular module
$scope.add = function () {
    $scope.array.push(item);
};

However, this approach resulted in all input fields being synchronized and displaying identical content for each item in the array, which was not my intended outcome. For reference, a working sample of my code can be found on codepen.

javascript angularjs angularjs-ng-repeat angularjs-ng-model

Answer 1

Answer №1

Essentially, the issue is that you are continuously adding a reference to the same "item" in the list, resulting in multiple references pointing to one item.

A better approach would be to:

angular.module('myapp', [])
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) {
  $scope.array = [];
  var item = {
    name: '',
    phone: '',
    email: '',
  };

  $scope.array.push(item);
  $scope.addItem = function () {

    $scope.array.push(
      {
        name : '',
        phone: '',
        email: '',        
      }    
    );

  };
}]);

This revised version should resolve the problem. As for the HTML aspect, many prefer using ng-repeat in a simpler manner like this:

<div ng-repeat='x in array'>
    <input ng-model='x.name'></input>
    <input ng-model='x.phone'></input>
    <input ng-model='x.email'></input>
</div>

Answer 2

Essentially, the issue is that you are continuously adding a reference to the same "item" in the list, resulting in multiple references pointing to one item.

A better approach would be to:

angular.module('myapp', [])
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) {
  $scope.array = [];
  var item = {
    name: '',
    phone: '',
    email: '',
  };

  $scope.array.push(item);
  $scope.addItem = function () {

    $scope.array.push(
      {
        name : '',
        phone: '',
        email: '',        
      }    
    );

  };
}]);

This revised version should resolve the problem. As for the HTML aspect, many prefer using ng-repeat in a simpler manner like this:

<div ng-repeat='x in array'>
    <input ng-model='x.name'></input>
    <input ng-model='x.phone'></input>
    <input ng-model='x.email'></input>
</div>

Answer 3

Answer №2

By pushing `item` in each iteration, you are essentially adding a reference to the same object multiple times. This means that any changes made to one instance of `item` will reflect on all elements in the array since they all point to the same object.

To resolve this issue, a simple solution is to add a copy of `item` instead of `item` itself within the $scope.add() function:

$scope.array.push(angular.copy(item));

An even better approach would be to define `item` as an object and instantiate it as needed:

var Item = function (){
    return {
        name: '',
        phone: '',
        email: ''
    };
};

Then, you can push new instances of `Item` into the array like so:

$scope.array.push(new Item());

Answer 4

By pushing `item` in each iteration, you are essentially adding a reference to the same object multiple times. This means that any changes made to one instance of `item` will reflect on all elements in the array since they all point to the same object.

To resolve this issue, a simple solution is to add a copy of `item` instead of `item` itself within the $scope.add() function:

$scope.array.push(angular.copy(item));

An even better approach would be to define `item` as an object and instantiate it as needed:

var Item = function (){
    return {
        name: '',
        phone: '',
        email: ''
    };
};

Then, you can push new instances of `Item` into the array like so:

$scope.array.push(new Item());

Answer 5

Answer №3

Revise your JavaScript code like this:

angular.module('myapp', [])
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) {
  $scope.entries = [];

  var entry = {
    name: '',
    phone: '',
    email: '',
  };

  $scope.entries.push(entry);
  $scope.addEntry = function () {
    entry.name = $scope.name;
    entry.phone = $scope.phone;
    entry.email = $scope.email;
    $scope.entries.push(entry);
    $scope.name = "";
    $scope.phone = "";
    $scope.email = "";
  };
}]);

Ensure that each of the name, email and phone are stored in separate models.

When adding an item to the array, remember to reset them.

Also update the model names in the HTML.

View the changes here.

Answer 6

Revise your JavaScript code like this:

angular.module('myapp', [])
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) {
  $scope.entries = [];

  var entry = {
    name: '',
    phone: '',
    email: '',
  };

  $scope.entries.push(entry);
  $scope.addEntry = function () {
    entry.name = $scope.name;
    entry.phone = $scope.phone;
    entry.email = $scope.email;
    $scope.entries.push(entry);
    $scope.name = "";
    $scope.phone = "";
    $scope.email = "";
  };
}]);

Ensure that each of the name, email and phone are stored in separate models.

When adding an item to the array, remember to reset them.

Also update the model names in the HTML.

View the changes here.

Implementing dynamic addition and removal functionality in AngularJS using ng-repeat and ng-model

Answer №1

Answer №2

Answer №3

Similar questions

Locate all buttons on the page that have an onclick function attached to them, and

Refresh Div/PartialView periodically

Unleashing the Power of Aurelia's HTML Attribute Binding

Angular (TypeScript) time format in the AM and PM style

Develop an asynchronous function that can fetch a result at a later time within an Express route

Best practices for effectively managing errors within JSON web tokens

Wait for Axios Request Interceptor to complete before sending another ajax call

What are your thoughts on Uptrends vs Dynatrace for Website Monitoring?

JavaScript Regular Expression Assistance Domain Snatcher

Unsubscribe option in the AWS Software Development Kit for Node.js

Conceal and unveil stationary navigation when scrolling back to the very top of the screen

What is the best way to serve index.html from a Node.js/Express application?

The technique of working through a recursive promise in an iterative manner

Customize the height of the Angular Material autocomplete dropdown to meet your needs

Utilizing a JSON object named "shop" to populate a grid within a fresh ExtJS window

Displaying a plethora of data points on a single graph using jQchart with a

What is the best method for ensuring that cheese rises to the top?

Executing code after finishing a fetch in Next.js

How to display a list of buttons with unique names using ng-repeat in Ionic 3

Encountering Uncaught Syntax Error when attempting a request with JSON parameters