How do you push ng-repeat value to controller?

Question

I want to populate a webpage using ng-repeat and the following array:

var array = [{name: Bill, age: 12, number: 1}, {name: Tyrone, age: 11, number: 2}, {name: Sarah, age: 14, number: 3}];

I want to be able to push a button and return to my Angular controller the name or number value for the given person. I don't know how to do this though I've tried with both button and input attempts with no success. You can see one of the attempts in the example code below.

<div class="container">
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th colspan="1" class="text-center">
                    Name
                </th>
                <th colspan="1" class="text-center">
                    Age
                </th>
                <th colspan="1" class="text-center">
                    Number
                </th>
            </tr>
            </thead>
            <tbody filter-list="search"ng-repeat="a in array">
            <tr>
                <td class="col-xs-6 col-sm-6 col-md-6 col-xl-6">
                    {{a.name}}
                </td>
                <td class="col-xs-4 col-sm-4 col-md-4 col-xl-4">
                    <button ng-click="Age()" ng-model="a.age">This Age</button>
                </td>
                <td class="col-xs-2 col-sm-2 col-md-2 col-xl-2">
                    <input type="button" name="number" ng-click="Number()" ng-model="a.number" />
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

My controller is as follows:

angular.module('startupApp')
  .controller('ManageCardCtrl', function ($scope, $location, $http) {

var array = [{name: Bill, age: 12, number: 1}, {name: Tyrone, age: 11, number: 2}, {name: Sarah, age: 14, number: 3}];

$scope.Age = function(){
      $http.post('api/age', {age: $scope.age})
          .success(function (response) {
            console.log(response)
          })
          .error(function (error) {
            console.log(error)
          });
    }


    $scope.number = function(){
        $http.post('api/number', {number: $scope.number})
            .success(function (response) {
              console.log(response)
            })
            .error(function (error) {
              console.log(error)
            });
        }
}

score 3 · Accepted Answer · answered Apr 27 '15 at 21:12

3

You can pass the data you want to use in the function's parameters:

<button ng-click="Age(a.age)">This Age</button>

$scope.Age = function(age) {
  $http.post('api/age', {age: age})
      .success(function (response) {
        console.log(response)
      })
      .error(function (error) {
        console.log(error)
      });
}

answered Apr 27 '15 at 21:12

Austin Greco

32,997
6
55
59

Thanks a mil! I've done this before though I did not pick up on it because of different use cases. Finally able to move on! – rashadb Apr 27 '15 at 21:14

score 1 · Answer 2 · answered Apr 27 '15 at 21:13

You need to give each person as Age argument:

<td class="col-xs-4 col-sm-4 col-md-4 col-xl-4">
   <button ng-click="Age(a)" ng-model="a.age">This Age</button>
</td>

And you'll get the concrete bound person as argument in your Age function:

$scope.Age = function(a) {
   var age = a.age;
};

I suggest this as a better approach than giving a.Age directly, because Angular implements data-binding paradigm and I feel that you want the bound object rather than the property of who knows what object. In other words, this gives the flexibility to work with more than a bound object property in the same scope.

score 1 · Answer 3 · answered Apr 27 '15 at 21:39

First, var array, is not accessible in the page scope. You will need to change it too:

$scope.array = ({name: 'Bill', age: 12, number: 1}, ...)

notice also in the above that name: should be a string. So add single quotes around the names. 'Bill', 'Tyrone'

Then, you just need to pass a parameter into the function:

HTML

<button ng-click="Age(a.age)" ng-model="a.age">This Age</button>

Controller

$scope.Age = function(age) {
  $http.post('api/age', {age: age})
  ...
}

I hope this helps. The To-do app on the angulars homepage is a great reference for this. Angular To-Do List

How do you push ng-repeat value to controller?

3 Answers3