Gre*_*rty 4 html-table angularjs angularjs-ng-repeat
答案似乎是双向数据绑定有效,如果你有一个对象数组转到ng-repeat,但是如果你有一个字符串数组则不行.
我希望提供一个用户可以输入多个收件人的UI.我有一系列名为"接收器"的名字.我的想法是我可以使用ng-repeat显示一个表,如下所示:
<table>
<tr ng-repeat = "receiver in receivers">
<td><input type = "text" ng-model = "receiver"></td>
<td><div ng-click = "addRecipient(receiver)">+</div></td>
<td><div ng-click = "deleteRecipient(receiver)">-</div></td>
</tr>
</table>
我遇到的问题是我知道无法将"接收器"的内容返回给我的控制器,除了调用addRecipient或deleteRecipient.这让我很难使用这些数据.
任何建议将不胜感激.如果有更好或"更正确"的方式来做到这一点,我很乐意看到它.
你不需要做任何额外的事情.无论在页面上的文本字段中输入什么文本,都会自动出现在$ scope.receivers数组中.我总是在我的控制器中定义我的范围变量明确性.
我有一个工作示例,但使用简单的对象而不是字符串,这可能是问题.
http://plnkr.co/edit/g66KTkDPlWt0xs5EZrrx?p=preview
脚本:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name="Nick";
$scope.receivers=[{value:"First"}];
$scope.addRecipient = function(receiver) {
$scope.receivers.push({value:""});
}
$scope.deleteRecipient = function(receiver) {
for(var i=0; i<$scope.receivers.length; i++) {
if($scope.receivers[i] === receiver) {
$scope.receivers.splice(i, 1);
break;
}
}
}
$scope.showme = function() {
var s = "";
for(var i=0; i<$scope.receivers.length; i++) {
s = s + i + ": " + $scope.receivers[i].value + "\n";
}
alert(s);
};
});
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table>
<tr ng-repeat = "receiver in receivers">
<td><input type="text" ng-model="receiver.value"></td>
<td><div ng-click="addRecipient(receiver)">+</div></td>
<td><div ng-click="deleteRecipient(receiver)">-</div></td>
</tr>
</table>
<button ng-click="showme()">Show Me Contents</button>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
14931 次 |
| 最近记录： |