Array in Angular scope variable has only one member

Question

I am a beginner to AngularJS and thanks to the Angular community on Stackoverflow which is willing to help a newbie like me, I am learning it very well thanks a lot for that.

Today I would like to add a feature to the exercise I was doing yesterday (which can be found here). I would like to keep a record of the pairs of numbers that the user has typed in and show it as a list of lines. To do that, I introduce an array of number objects. Pressing the button adds the current pair to the array.

Currently, it seems like the array contains only member whatever I do to push new members to it. Can anyone help me find my mistake?

var saApp = angular.module("saApp", []);

saApp.controller('numberController', function($scope) {
  $scope.numbers = [];

  $scope.number = {
    number1: 0,
    number2: 0,
    sumIt: function() {
      var numberObject;
      numberObject = $scope.number;
      return parseInt(numberObject.number1) + parseInt(numberObject.number2);
    }
  };

  $scope.pushIt = function() {
    if ($scope.number !== undefined)
      $scope.numbers.push($scope.number);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="saApp" ng-controller="numberController">
  <input type="text" ng-model="number.number1" placeholder="Enter a number here">

  <input type="text" ng-model="number.number2" placeholder="Enter another number here">

  <br />{{number.number1}} + {{number.number2}} = {{number.sumIt()}}

  <br />

  <br />
  <button ng-click="pushIt()">Push</button>

  <div ng-repeat="number in numbers">
    {{number.number1}} + {{number.number2}} = {{number.sumIt()}}

    <br />
  </div>

</div>

And even if I remove it, the array still has only one number. — Sandah Aung
– Sandah Aung, Commented Feb 26, 2016 at 4:13

Cyril Cherian · Accepted Answer · 2016-02-26 04:22:31Z

1

One change in your current code just clone the $scope.number before pushing into the $scope.numbers array.

 $scope. pushIt = function() {
            if ($scope.number !== undefined)
                $scope.numbers.push(angular.copy($scope.number));
        }

Why we should clone before pushing.

The $scope.number object is the same always thus all of the elements in the array will have the same $$hashkey and you will get this error

So you should clone or copy the object before pushing, so that the array has new element objects in it.

Working code here

answered Feb 26, 2016 at 4:22

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

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

1 Comment

Sandah Aung Over a year ago

I was coming to this conclusion as I was attempting to solve the problem. And things work better if I change numberObject = $scope.number; to numberObject = this;.

Rayon · Accepted Answer · 2016-02-26 04:21:13Z

Use object having keys as input fields to be pushed in ng-repeat. Every repeated object will have his own scope and will update biding values accordingly.

Try this:

var saApp = angular.module("saApp", []);

saApp.controller('numberController', function($scope) {
  $scope.numbers = [];
  $scope.pushIt = function() {
    var obj = {
      number1: 0,
      number2: 0,
      sumIt: function() {
        return parseInt(this.number1) + parseInt(this.number2);
      }
    }
    $scope.numbers.push(obj);
  }
  $scope.pushIt();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="saApp" ng-controller="numberController">
  <button ng-click="pushIt()">Push</button>
  <div ng-repeat="number in numbers">
    <input type="text" ng-model="number.number1" placeholder="Enter a number here">
    <input type="text" ng-model="number.number2" placeholder="Enter another number here">{{number.number1}} + {{number.number2}} = {{number.sumIt()}}
    <br />
  </div>
</div>

Fiddle here

Hassan Tariq · Accepted Answer · 2016-02-26 04:12:36Z

0

 $scope.pushIt = function() {
        if ($scope.number)
            $scope.numbers.push($scope.number);
    }

Replace your pushIt function by this Code

answered Feb 26, 2016 at 4:12

Hassan Tariq

7407 silver badges15 bronze badges

Collectives™ on Stack Overflow

Array in Angular scope variable has only one member

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related