AngularJs表单提交问题答案

【问题标题】：AngularJs form submit issuseAngularJs表单提交问题
【发布时间】：2018-01-19 13:17:51
【问题描述】：

我使用AngularJs来实现提交功能。当我单击提交按钮时，它不会保存表单并显示数据。我哪里错了。请你帮忙检查一下。谢谢！

(function() {
  var app = angular.module('store', []);
  var movies = [{
    name: 'People Places Things',
    releaseDay: '14/08/2015',
    Duration: '85 mins',
    Genre: 'Comedy',
    Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
  }];
  app.controller('StoreController', function() {
    this.products = movies;
  });
  app.controller("MovieController", function() {
    this.movie = {};
    this.addMovie = function(product) {
      product.movies.push(this.movie);
      this.movie = {};
    };
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
  <link href="main.css" rel="stylesheet" type="text/css">
  <title>Untitled Document</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body ng-controller="StoreController as store">
  <div ng-repeat="product in store.products">
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <h1>Moives Recommendation</h1>
    <p>
      <div>
        <table style="width: 80%">
          <tr>
            <th>Title</th>
            <th id="mvTitle">{{product.name}}</th>
          </tr>
          <tr>
            <th>Release date</th>
            <th>{{product.releaseDay}}</th>
          </tr>
          <tr>
            <th>Duration</th>
            <th>{{product.Duration}}</th>
          </tr>
          <tr>
            <th>Genre</th>
            <th>{{product.Genre}}</th>
          </tr>
          <tr>
            <th>Synopsis</th>
            <th>{{product.Synopsis}}</th>
          </tr>
        </table>
      </div>
      <div>
        <form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(product)">
          <table style="width: 80%">
            <tr>
              <th>Title</th>
              <th>{{movieCtrl.product.name}}</th>
            </tr>
            <tr>
              <th>Release date</th>
              <th>{{movieCtrl.product.releaseDay}}</th>
            </tr>
            <tr>
              <th>Duration</th>
              <th>{{movieCtrl.product.Duration}}</th>
            </tr>
            <tr>
              <th>Genre</th>
              <th>{{movieCtrl.product.Genre}}</th>
            </tr>
            <tr>
              <th>Synopsis</th>
              <th>{{movieCtrl.product.Synopsis}}</th>
            </tr>
          </table>
          <br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
            name="Duration" /><br> Genre:
          <input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
          <textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
          <input type="submit" value="Submit" />
        </form>
      </div>
    </p>
  </div>
</body>

</html>

我使用AngularJs来实现提交功能。当我单击提交按钮时，它不会保存表单并显示数据。我哪里错了。请你帮忙检查一下。谢谢！我认为问题出在 addMovie 函数中，但我找不到。

【问题讨论】：

我不明白addMovie函数在做什么？

标签： javascript html angularjs forms

【解决方案1】：

(function() {
  var app = angular.module('store', []);
  var movies = [{
    name: 'People Places Things',
    releaseDay: '14/08/2015',
    Duration: '85 mins',
    Genre: 'Comedy',
    Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
  }];
  app.controller('StoreController', function($rootScope) {
    $rootScope.products = movies;
  });
  app.controller("MovieController", function($rootScope) {
    this.product = {};
    this.addMovie = function(product) {
      $rootScope.products.push(product);
      this.product = {};
    };
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
  <link href="main.css" rel="stylesheet" type="text/css">
  <title>Untitled Document</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body ng-controller="StoreController as store">
  <div >
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <h1>Moives Recommendation</h1>
    
      <div  ng-repeat="product in $root.products">
        <table style="width: 80%">
          <tr>
            <th>Title</th>
            <th id="mvTitle">{{product.name}}</th>
          </tr>
          <tr>
            <th>Release date</th>
            <th>{{product.releaseDay}}</th>
          </tr>
          <tr>
            <th>Duration</th>
            <th>{{product.Duration}}</th>
          </tr>
          <tr>
            <th>Genre</th>
            <th>{{product.Genre}}</th>
          </tr>
          <tr>
            <th>Synopsis</th>
            <th>{{product.Synopsis}}</th>
          </tr>
        </table>
      </div>
      <div>
        <form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(movieCtrl.product)">         
          <br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
            name="Duration" /><br> Genre:
          <input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
          <textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
          <input type="submit" value="Submit" />
        </form>
      </div>
   
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

我觉得应该是这样的。因为您使用的是controllerAs 语法，所以您应该将controllerAs 变量放在函数或对象之前。

  ng-submit="movieCtrl.addMovie(movieCtrl.product)"

编辑：

您在示例中遇到了一些问题。因为您正在使用多个controller，并且每个控制器都负责某些操作。通过MovieController 添加新产品后，您应该为StoreController 发出它以在视图中显示最新产品。因此，对于通信两个控制器，您可以使用$broadcast 和$on 功能。正如您在演示中看到的那样。

还有其他问题是在展示产品时。用于显示您应该使用嵌套ng-repeat 的产品。

Demo

【讨论】：

谢谢，我更改了你的代码，但它不起作用。您是否尝试运行它。非常感谢
非常感谢！

【解决方案3】：

您的代码中有很多错误，这里正在运行 sn-p

注意：不建议使用 $rootScope，但您的代码中有不同的控制器设置，这就是为什么我尝试使用 $rootScope 方法但您应该使用服务来执行此类任务：

(function() {
  var app = angular.module('store', []);
  var movies = [{
    name: 'People Places Things',
    releaseDay: '14/08/2015',
    Duration: '85 mins',
    Genre: 'Comedy',
    Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
  }];
  app.controller('StoreController', function($rootScope) {
    $rootScope.products = movies;
  });
  app.controller("MovieController", function($rootScope) {
    this.product = {};
    this.addMovie = function(product) {
      $rootScope.products.push(product);
      this.product = {};
    };
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
  <link href="main.css" rel="stylesheet" type="text/css">
  <title>Untitled Document</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body ng-controller="StoreController as store">
  <div >
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <h1>Moives Recommendation</h1>
    
      <div  ng-repeat="product in $root.products">
        <table style="width: 80%">
          <tr>
            <th>Title</th>
            <th id="mvTitle">{{product.name}}</th>
          </tr>
          <tr>
            <th>Release date</th>
            <th>{{product.releaseDay}}</th>
          </tr>
          <tr>
            <th>Duration</th>
            <th>{{product.Duration}}</th>
          </tr>
          <tr>
            <th>Genre</th>
            <th>{{product.Genre}}</th>
          </tr>
          <tr>
            <th>Synopsis</th>
            <th>{{product.Synopsis}}</th>
          </tr>
        </table>
      </div>
      <div>
        <form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(movieCtrl.product)">         
          <br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
            name="Duration" /><br> Genre:
          <input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
          <textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
          <input type="submit" value="Submit" />
        </form>
      </div>
   
  </div>
</body>

</html>

【讨论】：

【解决方案4】：

在 addMovie 函数中，您应该只将电影添加到电影数组中。正确的功能应该是：

this.addMovie = function(product) {
      movies.push(this.movie);
      this.movie = {};
    };

除此之外，您的代码中还有一些严重的问题，例如

多次加载 Angular。
在 ng-repeat 中使用表单。

【讨论】：