如何使用AngularJS在表单提交上添加表单内容

【问题标题】：How to prepend content of a form on form submit using AngularJS如何使用AngularJS在表单提交上添加表单内容
【发布时间】：2014-12-12 05:53:46
【问题描述】：

我正在尝试学习 angularJS，但在弄清楚如何解决这个问题时遇到了问题。我正在尝试在用户提交表单时添加表单内容。这是我的代码，但它不起作用。谁能帮我找出问题出在哪里？谢谢！

angular.module("displayText", [])
  .controller("submitText", function($scope) {
    $scope.outputArr = [];
    $scope.print = function() {
        $scope.outputArr.push($scope.inputText);
        $scope.inputText = '';
      };
    };
  });

<body ng-app="displayText">
  <div ng-controller="submitText">
    <form method="get" action="#">
      <input type="text" name="input" ng-model="inputText" required/>
      <button ng-click="print(inputText)">Submit</button>
    </form>
  </div>

  <div>
    <p ng-repeat="text in outputArr">{{text}}</p>
  </div>
</body>

【问题讨论】：

标签： angularjs forms submit

【解决方案1】：

将这段代码放入submitText控制器div中

<div>
    <p ng-repeat="text in outputArr">{{text}}</p>
</div>

那么你的整个代码应该是这样的

<div ng-controller="submitText">
   <form method="get" action="#">
      <input type="text" name="input" ng-model="inputText" required/>
      <button ng-click="print(inputText)">Submit</button>
   </form>

  <div>
      <p ng-repeat="text in outputArr">{{text}}</p>
  </div>
</div>

这里是Plunker

在您的情况下，ng-repeat="text in outputArr" 不在控制器中，这意味着 submitText 控制器的范围对于 ng-repeat 无法访问，这就是它不打印任何内容的原因

【讨论】：