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表单提交问题

回答

相关问题