AngularJs - push Object in array - angularjs

Question

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).

Answer 1

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>

Answer 2

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

Answer 3

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>