提交带有ng-submit和输出字段的表单

时间:2018-10-18 07:09:04

标签: javascript angularjs

我的网站页面上有一个带有表格的表格,按下提交按钮后,我想将该数据输出到网站的另一页面。我可以在控制器中通过$ scope.title获得值,但不确定如何存储(数组?)并将其输出回另一页。我正在使用angularJS。

表格:

<div ng-app = "app">
        <form ng-controller = "body" ng-submit="Display()">
            <p>Title</p>
            <input type="text" ng-model="title">
            <p>Author</p>
            <input type="text" ng-model="author">
            <p><input type="submit" value="Submit"></p>
        </form>
</div>

控制器:

app.controller("body", function ($scope) {
    $scope.setPost = () => {
        $scope.Array = [];
        $scope.Display = () => {
            $scope.Array.push($scope.title);
        }
    };
});

帖子:

<div ng-repeat="value in Array">
     {{title}}
</div>

1 个答案:

答案 0 :(得分:0)

您可以尝试使用以下代码,并检查this plunker link以获取给定的示例工作方案。

控制器:

app.controller('MainCtrl', function($scope, $rootScope) {
  $rootScope.Array = [];
});

app.controller('body', function($scope, $rootScope) {
  $scope.Display = () => {
    var arrayValue = {
      title: $scope.title,
      author: $scope.author
    }
    $rootScope.Array.push(arrayValue);
  }
});

模板:

  <body ng-controller="MainCtrl">
    <form ng-controller="body" ng-submit="Display()">
      <p>Title</p>
      <input type="text" ng-model="title">
      <p>Author</p>
      <input type="text" ng-model="author">
      <p><input type="submit" value="Submit"></p>
    </form>
    <div ng-repeat="value in Array">
      {{value.title}} by {{value.author}}
    </div>
  </body>