Angular JSフォームの提出問題

Question

私はレビューアレイにエントリーを追加したいと思います。

<b>Submit a review</b> 
     <form name="submitReviews" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)"> 
      <blockquote> 
       <b>Stars : {{reviewCtrl.review.stars}}</b> 
       {{reviewCtrl.review.body}} 
       <cite>by: {{reviewCtrl.review.author}}</cite> 
      </blockquote> 
      <select ng-model="reviewCtrl.review.stars"> 
       <option value="1">1 Star</option> 
       <option value="2">2 Star</option> 
       <option value="3">3 Star</option> 
       <option value="4">4 Star</option> 
       <option value="5">5 Star</option> 
      </select> 
      <textarea ng-model="reviewCtrl.review.body"> 
      </textarea> 
      <label>by: </label> 
      <input ng-model="reviewCtrl.review.author" type="email" /> 
      <input type="submit" value="Submit Review" /> 
     </form> 

JSファイル：

app.controller('ReviewController', function($scope) { 
    $scope.review = {}; 

    $scope.addReview = function (product) { 
     product.reviews.push($scope.review); 
     $scope.review = {}; 
    }; 
}); 

私は（完全なオブジェクト構造）を追加したいながらの配列：

var gems = [{ 
    //First gem 
    name: "Dodecahedron", 
    price: 2.95, 
    description: "great stone", 
    specification: "Very Expensive, hand crafted, African made", 
    reviews: [{ 
     stars: 5, 
     body: "test review1", 
     author: "test1@gmail.com", 
    }, 
     { 
      stars: 3, 
      body: "not worth the price.", 
      author: "test2@gmail.com" 
     }], 
    canPurchase : true, 
    soldOut: false, 
    image: [ 
     { image1 : "Images/img1.jpeg" }, 
     { image2 : "Images/img2.jpeg" } 
    ] 
} 

は私が正しく、フォームの前にすべての情報を見ることができます（イメージと現在のレビューはアレイにあらかじめ定義されています）。 HTMLページから新しいレビューを提出すると、既存のレビュー（arr.push）に追加する必要があります。これは起こっていない。 このコントローラー（ReviewController）は別のコントローラー内にネストされています。それが違いを生むかどうかは分かりません。

Answer 1

あなたのフォームがページの投稿と再読み込みを行っているようです。あなたのハンドラを提出し、その後$event.preventDefault()またはreturn false

ng-submit="addReview($event, product)" 

を呼び出すに$eventを渡す...

$scope.addReview = function ($event, product) { 
    $event.preventDefault(); 
    // ... 
}; 

Answer 2

はないスコープを使用してみてください、しかし、あなたのコントローラのコードでcontollerそのもの。 $ scope.reviewsではなくthis.reviewsを使用してください。コントローラを構文として使用しているので、コントローラインスタンスを使用して変数を格納します。

Answer 3

ng-submitがあなたのaddReview（）メソッドを呼び出さないと感じました。これを最初に確認してください。 その場合、あなたは以下を試すことができます

コントローラを使用しているので、jsのコードを以下（$範囲）に変更してください。また、使用しているNG-モデルはreviewCtrl.reviewはそうここにも同じを使用している

this.addReview = function (product) { 
    product.reviews.push($scope.reviewCtrl.review); 
    $scope.reviewCtrl.review = {}; 
}; 

Answer 4

HTML：

<b>Submit a review</b> 
<form name="submitReviews" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview()"> 
    <blockquote> 
     <b>Stars : {{reviewCtrl.review.stars}}</b> 
     {{reviewCtrl.review.body}} 
     <cite>by: {{reviewCtrl.review.author}}</cite> 
    </blockquote> 
    <select ng-model="reviewCtrl.review.stars"> 
     <option value="1">1 Star</option> 
     <option value="2">2 Star</option> 
     <option value="3">3 Star</option> 
     <option value="4">4 Star</option> 
     <option value="5">5 Star</option> 
    </select> 
    <textarea ng-model="reviewCtrl.review.body"> 
    </textarea> 
    <label>by: </label> 
    <input ng-model="reviewCtrl.review.author" type="email" /> 
    <input type="submit" value="Submit Review" /> 
</form> 

コントローラ：

app.controller('ReviewController', function($scope) { 
    $scope.review = {}; 

    $scope.addReview = function() { 
     var review = angular.copy($scope.review); 
     // assuming gems is a global variable 
     gems.reviews.push(review); 
     $scope.review = {}; 
    }; 
}); 

私はこれが役に立てば幸い:)