时间戳

首页 > 解决方案 > 提交带有 ng-submit 和输出字段的表单

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

问题描述

我的网站页面上有一个带有表单的表单，按下提交按钮后，我想将该数据输出到网站的另一个页面。我可以在控制器中通过 $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>

标签： javascriptangularjs

解决方案

您可以尝试类似下面的代码，还可以检查此 plunker 链接以获取给定的示例工作场景。

控制器：

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>

推荐阅读