你如何将 ng-repeat 值推送到控制器？

Question

我想使用 ng-repeat 和以下数组填充网页：

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

我希望能够向我的 Angular 控制器按下按钮并 return 给定人员的姓名或号码值。我不知道该怎么做，尽管我尝试了按钮和输入尝试但都没有成功。您可以在下面的示例代码中看到其中一种尝试。

<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>

我的控制器如下：

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

Answer 1

您可以在函数的参数中传递要使用的数据：

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

Answer 2

你需要给每个人作为 Age 参数：

<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>

并且您将在 Age 函数中将具体绑定的人作为参数：

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

我建议这是一种比直接提供 a.Age 更好的方法，因为 Angular 实现了数据绑定范例，我觉得你想要 绑定对象 而不是 谁知道什么对象的属性。换句话说，这提供了在同一范围内处理多个绑定对象属性的灵活性。

Answer 3

首先，var 数组在页面范围内不可访问。您也需要更改它：

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

还要注意上面的 name: 应该是一个字符串。因此，在名称周围添加单引号。 'Bill'、'Tyrone'

然后，你只需要传递一个参数给函数：

HTML

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

控制器

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

希望对您有所帮助。 Angulars 主页上的待办事项应用程序是一个很好的参考。 Angular To-Do List

你如何将 ng-repeat 值推送到控制器？

How do you push ng-repeat value to controller?

javascript

html

angularjs

submit