gpt4 book ai didi

angularjs - 带数据输入的表格上的 Angular ng-repeat

转载 作者:行者123 更新时间:2023-12-02 22:34:02 25 4
gpt4 key购买 nike

答案似乎是,如果您有一个要进行 ng-repeat 的对象数组,则两种方式的数据绑定(bind)可以工作,但如果您有一个字符串数组,则两种方式的数据绑定(bind)不起作用。

我希望提供一个用户可以输入多个收件人的 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 之外,我不知道有什么方法可以将“receiver”的内容返回到我的 Controller 。这使得我很难使用这些数据。

如有任何建议,我们将不胜感激。如果有更好或“更正确”的方法来做到这一点,我很乐意看到它。

最佳答案

您不需要做任何额外的事情。在页面上的文本字段中输入的任何文本都会自动出现在 $scope.receivers 数组中。我总是在 Controller 中明确定义范围变量。

我有一个工作示例,但使用一个简单的对象而不是字符串,这可能是问题所在。

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>

关于angularjs - 带数据输入的表格上的 Angular ng-repeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28181631/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com