CODEWITHSUNDEEP
angularjs
vinox
vinox

Reputation: 401

AngularJs - push Object in array

I can't understand how to push object into an array I tried few different ways and still can't figured it out.

var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
	$scope.userInfo = [];
	
	$scope.pushInArray = function() {
		$scope.userInfo.push($scope.users)
	}

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">

<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>

at click of add button I push the users information in userInfo properities. I works on first time but If I modified the the value already stored value also modified(after push value is modifying).

Upvotes: 2

Views: 7951

Answers (3)

Pengyy
Pengyy

Reputation: 38209

try angular.copy, this will copy the exist object with a new instance.

var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
	$scope.userInfo = [];
	
	$scope.pushInArray = function() {
    var user = angular.copy($scope.users);
		$scope.userInfo.push(user);
	}

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">

<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>

Upvotes: 2

Mike Tung
Mike Tung

Reputation: 4831

You need to pass the object to the scope function to persist it.

var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
    $scope.userInfo = [];

    $scope.pushInArray = function(data) {
        var entry = (JSON.parse(JSON.stringify(data)));
        $scope.userInfo.push(entry);
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">

<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
</div>

Upvotes: 0

Aayushi Jain
Aayushi Jain

Reputation: 2879

You need to empty yours users before setting it to new values:

$scope.userInfo = [];

$scope.pushInArray = function(data) {
    $scope.userInfo.push(data)
    $scope.users = null;
}

HTML:

<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>

Here is the working Plnkr

Upvotes: 1

Related Questions