Submitting data in AngularJS form using ng-model inside ng-repeat

Question

I'm having the same problem as in this question, but the solutions there do not work for me.

I'm learning AngularJS and I am struggling to submit form data using ng-model inside of ng-repeat. I have a list of members of a group and the date they last attended:

[{"name": "Bob", "attended": "01/01/16"},
{"name":"Steve", "attended": "02/01/16"}]

I'm listing out all members using ng-repeat, and would like to be able to update the "attended" field from a form in each line. However, I cannot get "attended" to bind properly. Here's the code:

<div ng-repeat="member in members">
    {{member.name}}
    <input type="text" ng-model="attended"></input>
    <a href="#" ng-click="setAttended(attended)">Save</a>
</div>

$scope.setAttended = function(attended){
        alert( 'Date: ' + attended);
};

The alert shows "Date: undefined". I've also tried using objects instead of primitives:

<div ng-repeat="member in members">
    {{member.name}}
    <input type="text" ng-model="member.attended"></input>
    <a href="#" ng-click="setAttended(member)">Save</a>
</div>

$scope.setAttended = function(member){
        alert( 'Date: ' + member.attended);
};

I get that ng-repeat will create a new scope for each object, and those scopes inherit setAttended from the parent scope. I get that the parent scope doesn't know what is happening in the child scopes, and so the parameter must let it know.

Why doesn't my parameter contain my input value?

Is the input not being bound to the model correctly before I run setAttended?

score 0 · Answer 1 · answered Aug 03 '16 at 17:01

Please try below code and feedback me:

<div ng-repeat="member in members">
    {{member.name}}
    <input type="text" ng-model="members[$index].attended"></input>
    <a href="#" ng-click="setAttended(members[$index].attended)">Save</a>
</div>

$scope.setAttended = function(attended){
        alert( 'Date: ' + attended);
};

rejo · Answer 2 · 2016-08-03T17:19:25.217

Use this , It refers to the correct scope object from ng-repeat function

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.members = [{"name": "Bob", "attended": "01/01/16"},
{"name":"Steve", "attended": "02/01/16"}];
   $scope.setAttended = function(member){
            alert( 'Date: ' + this.attended);
    };
});

 <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    
<body ng-app="plunker" ng-controller="MainCtrl">
 <div ng-repeat="member in members">
        {{member.name}}
        <input type="text" ng-model="attended">
        <a href="#" ng-click="setAttended(member)">Save</a>
    </div>
  </body>

score 0 · Accepted Answer · answered Aug 03 '16 at 17:03

Actually it is working for me. See the snippet below.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>Title</title>


  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.min.js"></script>



  <style>
  </style>

</head>


<body ng-controller="myController">


  <div ng-repeat="member in members">
    {{member.name}}
    <input type="text" ng-model="member.attended"/>
    <a href="#" ng-click="setAttended(member)">Save</a>
  </div>


  <script>
    var app = angular.module("myApp", []);
    app.controller("myController", function($scope) {
      $scope.members = [{
        "name": "Bob",
        "attended": "01/01/16"
      }, {
        "name": "Steve",
        "attended": "02/01/16"
      }];

      $scope.setAttended = function(member) {
        alert('Date: ' + member.attended);
      }

    });
  </script>


</body>

</html>

You're right, it does work. Turns out the problem was the JQuery datepicker I'm using on the field. If I select a date from the datepicker, the model doesn't update. If I select a date then type anything in the field manually, it updates the model. — capnmojo, Aug 04 '16 at 05:32

Submitting data in AngularJS form using ng-model inside ng-repeat

3 Answers3