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表單提交問題

回答

相關問題