Angular JS表單提交問題

我想添加一個條目到我的評論數組。Angular JS表單提交問題

<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: "[email protected]", 
    }, 
     { 
      stars: 3, 
      body: "not worth the price.", 
      author: "[email protected]" 
     }], 
    canPurchase : true, 
    soldOut: false, 
    image: [ 
     { image1 : "Images/img1.jpeg" }, 
     { image2 : "Images/img2.jpeg" } 
    ] 
}

我可以看到正確的表格前的所有信息（在數組中預定義的圖像和當前評論）。當我從HTML頁面提交新評論時，應該將其添加到現有評論（arr.push）中。這沒有發生。該控制器（ReviewController）嵌套在另一個控制器內。不知道這是否有所作爲。

來源

2016-09-25 Anuvrat Tiku

我認爲你需要將product.reviews聲明爲一個數組，作爲product.reviews = [];試試這個 – Aravind

看起來您的表單正在發佈和重新加載頁面。通過$event到您提交處理程序，並調用$event.preventDefault()或return false

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

然後...

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

來源

2016-09-25 04:22:03 Rob

我明白你在說什麼，因爲我沒有在任何地方保存這個值，我會在頁面刷新時消失。我試過你的方式，但似乎沒有工作。 –

儘量不使用範圍，但它本身位指示在控制器代碼。使用this.reviews，而不是$ scope.reviews。您正在使用控制器作爲語法，所以使用控制器實例來存儲變量。

來源

2016-09-25 04:44:18

##這不是工作以及 app.controller（ 'ReviewController'，函數（）{ this.review = {}; this.addReview =函數（產品）{ product.reviews.push（此。 review）; this.review = {}; }; }）; –

難以在沒有您的代碼的情況下工作。嘗試在將它添加到數組之後不清除審閱，可能會在添加它之後清除數組。 –

我覺得ng-submit並沒有調用你的addReview（）方法。先檢查一下。如果是這種情況，那麼你可以嘗試下面的代碼

當你使用控制器在js中將你的代碼更改爲下面的代碼（$ scope to this）。另外你正在使用的NG-模型reviewCtrl.review所以使用相同的位置，以及

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

來源

2016-09-25 06:15:41

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 = {}; 
    }; 
});

我希望這有助於:)

來源

2016-09-25 12:46:19

Angular JS表單提交問題

回答

相關問題