Expanding form fields dynamically with AngularJS

Question

Expanding form fields dynamically with AngularJS

I am currently working on a form that allows users to click a '+' sign in order to add new lines. I've set up a function to be called when the button is clicked, which should push a new line into the array. However, for some reason the new lines are not being created successfully. On the other hand, the function responsible for removing a line seems to be functioning properly.

Take a look at the JavaScript code below:

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope', '$q', function($scope, $q) {
    $scope.arr = [1,2];
    $scope.addLine = function(index){
        $scope.arr.push();
    }
    $scope.removeLine = function(index){
        $scope.arr.splice(index, 1);
    }
}]);

javascript arrays angularjs angularjs-ng-repeat

Answer 1

Answer №1

Make sure to push an element into the array.

The Purpose of push() and How to Use It: By utilizing the push() method, you can append new elements to the end of an array and receive the updated length as a result.

Please Note: Newly added items will be placed at the end of the existing array.

Additionally, keep in mind that this method alters the array's length.

Pro Tip: When you need to insert items at the start of an array, employ the unshift() method instead.

http://www.w3schools.com/jsref/jsref_push.asp

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope',
  function($scope) {

    $scope.arr = [1, 2];
    $scope.addLine = function(index) {
      $scope.arr.push(index);
    }
    $scope.removeLine = function(index) {
      $scope.arr.splice(index, 1);
    }
  }
]);

<!doctype html>
<html ng-app="myApp">

<head>
  <title>Hello AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div ng-controller="myController">
    <button name="addLine" ng-click="addLine(arr.length+1)">Add Line</button>
    {{ arr | json}}

    <ul>
      <li data-ng-repeat="x in arr">
        {{ x }}  - <button name="addLine" ng-click="removeLine($index)">Remove Line</button>
      </li>
    </ul>

  </div>
</body>

</html>

Answer 2

Make sure to push an element into the array.

The Purpose of push() and How to Use It: By utilizing the push() method, you can append new elements to the end of an array and receive the updated length as a result.

Please Note: Newly added items will be placed at the end of the existing array.

Additionally, keep in mind that this method alters the array's length.

Pro Tip: When you need to insert items at the start of an array, employ the unshift() method instead.

http://www.w3schools.com/jsref/jsref_push.asp

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope',
  function($scope) {

    $scope.arr = [1, 2];
    $scope.addLine = function(index) {
      $scope.arr.push(index);
    }
    $scope.removeLine = function(index) {
      $scope.arr.splice(index, 1);
    }
  }
]);

<!doctype html>
<html ng-app="myApp">

<head>
  <title>Hello AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div ng-controller="myController">
    <button name="addLine" ng-click="addLine(arr.length+1)">Add Line</button>
    {{ arr | json}}

    <ul>
      <li data-ng-repeat="x in arr">
        {{ x }}  - <button name="addLine" ng-click="removeLine($index)">Remove Line</button>
      </li>
    </ul>

  </div>
</body>

</html>

Answer 3

Answer №2

Take a look at this:

var app = angular.module('App', []);

app.controller('AppController', ['$scope', function($scope) {
    $scope.arr = [1,2];
    $scope.addLine = function(last){
        $scope.arr.push(last + 1);
    }
    $scope.removeLine = function(index){
        $scope.arr.splice(index, 1);
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
    <button ng-click="addLine(arr.length)">Add Line</button>
    <hr/>
    <div data-ng-repeat="x in arr">
        Line: {{x}} <button ng-click="removeLine($index)">Del</button>
    </div>
</div>

Answer 4

Take a look at this:

var app = angular.module('App', []);

app.controller('AppController', ['$scope', function($scope) {
    $scope.arr = [1,2];
    $scope.addLine = function(last){
        $scope.arr.push(last + 1);
    }
    $scope.removeLine = function(index){
        $scope.arr.splice(index, 1);
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
    <button ng-click="addLine(arr.length)">Add Line</button>
    <hr/>
    <div data-ng-repeat="x in arr">
        Line: {{x}} <button ng-click="removeLine($index)">Del</button>
    </div>
</div>

Expanding form fields dynamically with AngularJS

Answer №1

Answer №2

Similar questions

Route in Node.js for event binding

Deciphering JSON using JavaScript

The bundle.js file is displaying HTML code instead of JavaScript

What is the best way to display the nested information from products.productId?

Can you explain the purpose of the .json() function in Angular2?

Guide to fetching external data with Next.js and importing the component into a different file

Can JavaScript be used to create a CSRF token and PHP to check its validity?

Using the .each method in AJAX JQUERY to iterate through callback JSON data and applying an if statement with Regular Expression to identify matches

Guide to adding an image with feathers.js and multer:

Get the XML element containing the desired value in the downloadURL

The concept of asynchronicity and callbacks in JavaScript

Remove an item from an array in JavaScript by specifying its value, with compatibility for IE8

Using Selenium Webdriver to target and trigger an onclick event through a CSS selector on a flight booking

The parseFloat function only considers numbers before the decimal point and disregards

Creating a 2D array matrix in JavaScript using a for loop and seamlessly continuing the number count onto the next row

Uncovering components generated by React JS with BeautifulSoup

What methods can I use to minimize the duration of invoking the location.reload() function?

Parsing JSON sub items in Android application using Java

Error: The first certificate could not be verified, although I included rejectUnauthorized: false option

"Using a WMD Editor to show the content of the wmd-preview division and questions on how to save this content in a