你如何将 ng-repeat 值推送到控制器?
How do you push ng-repeat value to controller?
我想使用 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)
});
}
}
您可以在函数的参数中传递要使用的数据:
<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)
});
}
你需要给每个人作为 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 实现了数据绑定范例,我觉得你想要 绑定对象 而不是 谁知道什么对象的 属性。换句话说,这提供了在同一范围内处理多个绑定对象 属性 的灵活性。
首先,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 和以下数组填充网页:
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)
});
}
}
您可以在函数的参数中传递要使用的数据:
<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)
});
}
你需要给每个人作为 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 实现了数据绑定范例,我觉得你想要 绑定对象 而不是 谁知道什么对象的 属性。换句话说,这提供了在同一范围内处理多个绑定对象 属性 的灵活性。
首先,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