Angularjs scope variable with dot displays undefined within ng-repeat

Question

I have a an angularjs form am trying to submit. The scope variables has each form ng-model variables with dot for example ng-model="post.title", ng-model="post.pid".

The problem that am having is that post.pid and post.title keeps on alerting values undefined whenever the submit button is clicked..

I have combed stackoverflow for solution and I found this two links

AngularJS $scope form attribute is undefined after ng-submit

$scope with dot (.) not initializing values to input fields in angular

and their answers was that I have to first initialized the $scope.post so I have implemented it as follows based on solutions the both links provided.

$scope.post = {}; 
  $scope.submitButton = function(){
alert($scope.post.pid);
alert($scope.post.title);
  }

Yet it keeps on alerting Undefined each time the submit button is clicked.

Below is the entire code

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="post in posts">
  <form>
    post Id<br>
    <input type='text' ng-model="post.pid" >
    <br> post Title<br>
    <input type='text' ng-model="post.title" name="title">
    <br>
    <input type='button' id='but_save' value='Save' ng-click="submitButton()">
</form>
</div>


<script>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http, $parse) {

  $scope.posts = [
    {
      "pid" : "1",
      "title" : "title1"
    },
    {
      "pid" : "2",
      "title" : "title2"
    },
    {
      "pid" : "3",
      "title" : "title3"
    },
  ]




$scope.post = {}; 


  $scope.submitButton = function(){

alert($scope.post.pid);
alert($scope.post.title);
  }

});
</script>

</body>
</html>

georgeawg · Accepted Answer · 2018-06-09T03:22:23.780

Since ng-repeat creates a child scope for each item, it is not visible to the parent scope.

Pass the post object as an argument to the submit function:

<div ng-repeat="post in posts">
  <form>
    post Id<br>
    <input type='text' ng-model="post.pid" >
    <br> post Title<br>
    <input type='text' ng-model="post.title" name="title">
    <br>
    <input type='button' id='but_save{{$index}}' value='Save'
           ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶u̶b̶m̶i̶t̶B̶u̶t̶t̶o̶n̶(̶)̶"̶
           ng-click="submitButton(post)" />
  </form>
</div>

Use that argument in the function:

$scope.submitButton = function(post){
    ̶a̶l̶e̶r̶t̶(̶$̶s̶c̶o̶p̶e̶.̶p̶o̶s̶t̶.̶p̶i̶d̶)̶;̶
    alert(post.pid);
    ̶a̶l̶e̶r̶t̶(̶$̶s̶c̶o̶p̶e̶.̶p̶o̶s̶t̶.̶t̶i̶t̶l̶e̶)̶;̶
    alert(post.title);
}

score 0 · Answer 2 · answered Jun 09 '18 at 02:26

Your problem is that post in ng-repeat is not the same as $scope.post, because ng-repeat creates a sub-scope:

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item

To have your submitButton function see inputs, you'll need:

either to pass it the $index of the submitted post and get values from $scope.posts
or pass directly the values as arguments of the function

I'd rather avoid index manipulation and go for 2nd option:

<input type='button' id='but_save' value='Save' ng-click="submitButton(post.pid,post.title)">

Angularjs scope variable with dot displays undefined within ng-repeat

2 Answers2