Question

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

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

我希望能够按下按钮并向我的Angular控制器返回给定人员的姓名或号码值。虽然我尝试过按钮和输入尝试都没有成功，但我不知道如何做到这一点。您可以在下面的示例代码中看到其中一个尝试。

<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}, ...)

另请注意上面的名称：应该是一个字符串。因此，在名称周围添加单引号。 '比尔'，'泰隆'

然后，您只需要将参数传递给函数：

<强> 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值推送到控制器？

3 个答案: