Angular ng-repeat on table with data input

Question

答案似乎是，如果您有一组要进行 ng-repeat 的对象，则数据绑定的两种方式都有效，但如果您有一组字符串，则数据绑定无效。

我希望提供一个 UI，用户可以在其中输入多个收件人。我有一个名为 "receivers" 的名称数组。我的想法是我可以使用 ng-repeat 显示 table，像这样：

<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" 的内容返回到我的控制器。这让我很难使用这些数据。

如有任何建议，我们将不胜感激。如果有更好的或 "more correct" 方法来做到这一点，我很乐意看到它。

Answer 1

The problem I'm running in to is that I know of no way to get the contents of "receiver"

如果您想计算一个表达式（或者在您的情况下显示每个 "receiver" 的信息），您可以使用运算符“{{yourExpression}}”。

示例：<td>{{receiver.oneAttribute}}</td>

有关详细信息，请参阅此文档：https://docs.angularjs.org/guide/expression

Answer 2

您不需要做任何额外的事情。无论在您页面的文本字段中输入什么文本，都会自动出现在您的 $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>

Answer 3

您可以在网站上使用此方法

https://stackblitz.com/edit/data-api-rest-angular

我用了

Angular ng-repeat on table with data input

Angular ng-repeat on table with data input

html-table

angularjs

angularjs-ng-repeat