I have a data from the database in a loop and this works great, and the value is in input field, but when i want read this value after click angular return me:

Object {newName: undefined, newEmail: undefined}

and i don't know why. Please for help.

HTML CODE:

<tr ng-repeat="user in users">
    <td><input type="text" ng-model="user.name" name="user.name" ></td>
    <td><input type="text" ng-model="user.email" name="user.email" ></td>
    <td><button ng-click="checkData()">Click</button></td>
</tr>

CONTROLLER CODE:

 $scope.user = {};
 $scope.checkData = function () {
   var data = {
      newName: $scope.user.name,
      newEmail: $scope.user.email
   };
 console.log(data);

I have a data from the database in a loop and this works great, and the value is in input field, but when i want read this value after click angular return me:

Object {newName: undefined, newEmail: undefined}

and i don't know why. Please for help.

HTML CODE:

<tr ng-repeat="user in users">
    <td><input type="text" ng-model="user.name" name="user.name" ></td>
    <td><input type="text" ng-model="user.email" name="user.email" ></td>
    <td><button ng-click="checkData()">Click</button></td>
</tr>

CONTROLLER CODE:

 $scope.user = {};
 $scope.checkData = function () {
   var data = {
      newName: $scope.user.name,
      newEmail: $scope.user.email
   };
 console.log(data);

• javascript
• angularjs
• angularjs-ng-repeat
• angularjs-ng-click

3 Answers 3

Inside your ng-repeat code you have displayed each element of users & you are showing the one below another inside tr of table. While you wanted to access the element which you are editing, You need to pass that user object to the checkData method so that you can have access to that specific specific user.

Markup

<tr ng-repeat="user in users">
    <td><input type="text" ng-model="user.name" name="user.name" ></td>
    <td><input type="text" ng-model="user.email" name="user.email" ></td>
    <td><button ng-click="checkData(user)">Click</button></td>
</tr>

Code

$scope.checkData = function (user) {
   var data = {
      newName: user.name,
      newEmail: user.email
   }
   console.log(data);
};

In your ng-click pass the user model such that it bees ng-click="checkData(user)"

Then, rewrite your controller code as:

$scope.user = {};
$scope.checkData = function (user) {
  console.log(user);
};

You need to give the function the data from the DOM you want to evaluate, which is the current user:

You can use

<tr ng-repeat="user in users">
  <td>{{user.name}}</td>
  <td>{{user.email}}</td>
  <td><button ng-click="check(user)"></button></td>
</tr>



$scope.check = function (thing) {
  var currentUser = {
    name: thing.name,
    email: thing.email
  }
}