CODEWITHSUNDEEP
javascriptjqueryangularjs
Prateek Mishra
Prateek Mishra

Reputation: 1264

Angular JS - ng-repeat repeating old values

I am new to Angular JS. I have created a code in angular using app and controller. What I am tyring to do is to add name dynamically to a array when a button is clicked.

By default my array has two value passed. When i give an input and click the add button,it adds the string for the first time. But when i give another input and click add again, the old string is replaced by the new string and the new string is added again.

Here is the piece of code on JSFiddle: http://jsfiddle.net/5DMjt/3680/

var demo= angular.module("demo",[]);
var simplecontroller = function($scope){
$scope.members = [{id:1,name:'prateek'},{id:2,name:'Ruchi'}];
$scope.addmember = function(newmember){
newmember.id = $scope.members.length+1;
$scope.members.push(newmeber);   
demo.controller(simplecontroller);
   }
}

and here is the HTML Code:

<div ng-app="demo">
<div ng-controller="simplecontroller">
<ul>
  <li ng-repeat="member in members">{{member.id}}-{{member.name}}</li>
</ul> 
  Name<input type="Text" ng-model="inputmember.name">
</br><h2>
  {{inputmember}}
 </h2>
 <input type="button" value="Add" ng-click="addmember(inputmember)">

   </div>
 </div>

Please Help !

Upvotes: 1

Views: 753

Answers (6)

Sachin Patil
Sachin Patil

Reputation: 21

You have two options.

Either you can reinitialize it every time what I would not recommend.

And the other one is to, pass the parameters with values. 

$scope.members.push({id:newmember.id,name:newmember.name});

:)

Upvotes: 2

akki
akki

Reputation: 451

Before pushing to $scope.members you need to create a new object and populate it with id and name from the input.

Upvotes: 0

amanpurohit
amanpurohit

Reputation: 1296

$scope.members = $scope.members.concat({id: newmember.id, name: newmember.name});

Solved : http://jsfiddle.net/5DMjt/3693/

Upvotes: 0

Artur Aleksanyan
Artur Aleksanyan

Reputation: 500

You have a syntax error. See console error for more info. Your variable inputmember is not defined anywhere. Also you need to push to array new reference of the object, so the old one in array does not change each time you type value. Here is a working version.

http://jsfiddle.net/a9zvgm8k/

$scope.addmember = function(newMember){
    newMember.id = $scope.members.length+1;

    $scope.members.push(angular.extend({}, newMember));   
    demo.controller(simplecontroller);
}

Upvotes: 0

Kursad Gulseven
Kursad Gulseven

Reputation: 2008

See this updated fiddle: http://jsfiddle.net/5DMjt/3689/

  Name<input type="Text" ng-model="newname">

This gives you a scope variable newname.

<input type="button" value="Add" ng-click="addmember()">

And addmember function uses this newname to create a new object and add it to the list:

$scope.addmember = function(){
  var newmember = {};
  newmember.id = $scope.members.length+1;
  newmember.name = $scope.newname;
  $scope.members.push(newmember);  
}

Upvotes: 1

Deep
Deep

Reputation: 66

What i analyzed is that push function is passing the address that is why binding still exists.What u can do is pass the value instead like i did below-:

 $scope.addmember = function(newmember){
  newmember.id = $scope.members.length+1;
    $scope.members.push({id:newmember.id,name:newmember.name});   
  demo.controller(simplecontroller);
  }

Hope this solves your problem.Happy learning :)

Upvotes: 2

Related Questions