How to have different values in dynamically added array

Question

I have one form I am adding some fields say name,age,sex through that form

<html>
<body>
  <form>
    <input type="text" ng-model="name">
    <input type="text" ng-model="age">
    <input type="text" ng-model="sex">
    <input type="button" value="add" ng-click="addToArray()">
  </form>
  <div ng-repeat="item in formdata">
    <input type="text" ng-model="item.name">
    <input type="text" ng-model="item.age">
    <input type="text" ng-model="item.sex">
  </div>
</body>
</html>

In Controller

app.controller('ExampleCtrl', function() {
  var formdata = [];

  $scope.addToArray = function() {
    var temp = {
      name: $scope.name,
      age: $scope.age,
      sex: $scope.sex
    }
    formdata.push(temp);
  }
});

Now the problem is when I add object to formdata array and display it with ng-repeat it shows same data for each object.

For ex:

if I enter "John",23,"Male" & "Medona",34,"Female"

it shows "Medona",34,"Female" two times

I want each object to have different property value.

It works if you attach formdata to scope working fiddle: http://jsfiddle.net/HB7LU/22338/ — TonalLynx, Jan 18 '16 at 14:48

score 2 · Answer 1 · edited Jan 18 '16 at 14:51

2

Update var formdata to $scope.formdata:

$scope.formdata = [];

$scope.addToArray = function() {
  var temp = {
    name: $scope.name,
    age: $scope.age,
    sex: $scope.sex
  }
  $scope.formdata.push(temp);
}

edited Jan 18 '16 at 14:51

Rajesh

24,354
5
48
79

answered Jan 18 '16 at 14:42

zamarrowski

483
2
7

rkalita · Accepted Answer · 2016-01-19T06:25:48.387

You should use the $scope in your controller like

app.controller('ExampleCtrl',function($scope){
    $scope.formdata=[];

    $scope.addToArray=function(){
        var temp={
            name:$scope.name,
            age:$scope.age,
            sex:$scope.sex
        }
        $scope.formdata.push(temp);
    };
});

Or you can use 'this' and the name of your controller or alias.

    <html>
        <body ng-controller="ExampleCtrl as ctrl">
            <form>
                <input type="text" ng-model="name">
                <input type="text" ng-model="age">
                <input type="text" ng-model="sex">
                <input type="button" value="add" ng-click="ctrl.addToArray()">
            </form>
           <div ng-repeat="item in formdata">
               <input type="text" ng-model="item.name">
               <input type="text" ng-model="item.age">
               <input type="text" ng-model="item.sex">
           </div>
        </body>
    </html>


app.controller('ExampleCtrl',function(){
    var self = this;
    self.formdata=[];

    self.addToArray=function(){
        var temp={
            name:Petter,
            age:25,
            sex:'Male'
        }
        self.formdata.push(temp);
    };
});

Here is the Plunker

You mean 'this' and '$scope'? If so, there is the good answer to your question http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers — rkalita, Jan 19 '16 at 06:41

How to have different values in dynamically added array

2 Answers2