AngularJs表单提交问题

我使用AngularJs实现提交功能。当我点击提交按钮时，它不会保存表单并显示数据。我错在哪里？你能帮忙检查一下吗？谢谢！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函数中，但我找不到它。

来源

2017-08-11 Yunxi Zhao

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

你有很多事情错在你的代码，这里的工作片断

注意：不建议使用$ 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>

来源

2017-08-11 06:29:11

我认为它应该是这样的。因为你正在使用controllerAs语法，所以你应该在函数或对象之前放置controllerAs变量。

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

编辑：

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

等显示产品时出现问题。用于显示您应该使用嵌套的产品ng-repeat。

Demo

来源

2017-08-11 06:14:47

谢谢，我更改了你的代码，但它不起作用。你尝试过吗？非常感谢你 –

请看更新演示。 –

非常感谢！ –

在addMovie功能，你应该增加电影只有电影阵列。正确的功能将是这样的：

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

除此之外，你有一些严重的问题，在你的代码一样

加载不止一次角多。
在ng-repeat中使用表格。

来源

2017-08-11 06:27:23

(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>

来源

2017-08-13 06:05:21

AngularJs表单提交问题

回答

相关问题