私は、送信機能を達成するためにAngularJsを使用します。送信ボタンをクリックすると、フォームを保存せずにデータを表示します。どこが間違っているの?あなたはそれを確認するために助けてください。ありがとう!私は機能を提出達成するためにAngularJsを使用AngularJsフォームsubmit issuse
(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>
。送信ボタンをクリックすると、フォームを保存せずにデータを表示します。どこが間違っているの?あなたはそれを確認するために助けてください。ありがとう! 問題はaddMovie関数にあると思いますが、見つけられません。
「addMovie」機能は何をしているのですか? –