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?

kukkuz · Accepted Answer · 2016-08-03 17:03:32Z

0

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>

answered Aug 3, 2016 at 17:03

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

capnmojo Over a year ago

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.

M.javid · Accepted Answer · 2016-08-03 17:01:53Z

0

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);
};

answered Aug 3, 2016 at 17:01

M.javid

6,6324 gold badges44 silver badges58 bronze badges

Comments

rejo · Accepted Answer · 2016-08-03 17:19:25Z

0

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="[email protected]"></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>

edited Aug 3, 2016 at 17:19

answered Aug 3, 2016 at 17:03

rejo

3,3405 gold badges29 silver badges35 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related