2017-08-11 14 views
0

私は、送信機能を達成するために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関数にあると思いますが、見つけられません。

+2

「addMovie」機能は何をしているのですか? –

答えて

0

現在のスニペット働いている、あなたのコード内で間違ったことがたくさんある

注:私は$ rootScopeアプローチしようとした理由は、thatsの$ 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>

0

私はこのようにすべきだと思います。これはcontrollerAs構文を使用しているので、関数またはオブジェクトの前に変数controllerAsを置く必要があります。

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

編集:

あなたは、試料中のいくつかの問題を抱えています。 controllerを複数使用していて、各コントローラーが何らかのアクションを担当しているためです。 MovieControllerで新製品を追加した後、StoreControllerのためにそれを放出して、最新の製品を表示する必要があります。したがって、2つのコントローラの通信には$broadcast$onの機能を使用できます。あなたがデモで見るように。

などの問題が表示されていました。ネストされた製品を表示するためのng-repeat。 addMovie機能で

Demo

+0

ありがとう、私はあなたのコードを変更しましたが、動作しません。あなたはそれを実行しようとしましたか?あまりにもありがとうございます –

+0

更新されたデモをご覧ください。 –

+0

ありがとう! –

0

、あなただけの映画アレイにムービーを追加する必要があります。それよりも

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

その他、何度も角度以上のロード

  1. ようなあなたのコード内でいくつかの深刻な問題がある:正しい関数は次のようになります。
  2. ng-repeat自体でフォームを使用する。
0

(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>
:しかし、あなたは、タスクのこの種を行うためのサービスを使用する必要があります

関連する問題