Adding lines to a form using AngularJS

Question

I am trying to create a form that users can press the '+' sign and add a new line. I do this by calling a function when a button is clicked and then pushing a new line into the array. The new lines are not being created, however. The function below that removes the line seems to be working.

Here is the js:

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);
    }
}]);

I updated the script below it should be a solid answer. Please review. — Enkode
– Enkode, Commented Nov 12, 2015 at 17:46

Enkode · Accepted Answer · 2015-11-12 18:19:41Z

You need to push something into the array.

Push() Definition and Usage: The push() method adds new items to the end of an array, and returns the new length.

Note: The new item(s) will be added at the end of the array.

Note: This method changes the length of the array.

Tip: To add items at the beginning of an array, use the unshift() method.

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>

Emir Marques · Accepted Answer · 2015-11-12 17:54:51Z

0

Look 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>

answered Nov 12, 2015 at 17:54

Emir Marques

2,6772 gold badges18 silver badges22 bronze badges

4 Comments

Enkode Over a year ago

This seems like a duplicate of my answer. Do you have anything to add that is unique?

Emir Marques Over a year ago

I tried your example more could not make it work . Also my example is different , I'm not using $ q . But your example works now , from what I see .

Enkode Over a year ago

I edited it 26 minutes ago, and you added yours 10 min later.. $q was left over from questioners code. It is not actually being used. Just curious why the duplicate. Thanks.

Emir Marques Over a year ago

Right man! How i speak in my first test your code not works for me. Your code not render data after insert new register. But for not generate problems, i am removing this response

Collectives™ on Stack Overflow

Adding lines to a form using AngularJS

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related