Question

答案似乎是双向数据绑定有效，如果你有一个对象数组进入ng-repeat，但是如果你有一个字符串数组，它就不起作用。

我希望提供一个用户可以输入多个收件人的UI。我有一系列叫做＆＃34;接收器＆＃34;的名字。我的想法是我可以使用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>

我遇到的问题是，我知道无法获取＆＃34;接收器＆＃34;的内容。回到我的控制器，而不是调用addRecipient或deleteRecipient。这使我很难使用这些数据。

任何建议都将不胜感激。如果有更好的或更正确的＆＃34;这样做的方式，我很乐意看到它。

Answer 1

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

我遇到的问题是我知道无法获取“接收器”的内容

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

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

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

Answer 3

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

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

我投入使用

带有数据输入的表格上的角度ng-repeat

3 个答案: