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传递到您的提交处理程序，然后致电$event.preventDefault()或return false

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

...然后

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

Answer 2

尝试使用非范围，但在控制器代码中使用控制器本身。使用this.reviews，而不是$ scope.reviews。您使用控制器作为语法，因此使用控制器实例来存储变量。

Answer 3

我觉得ng-submit没有调用你的addReview（）方法。先检查一下。如果是这种情况，那么您可以尝试以下

当您使用控制器时，将您的代码更改为js以下（$ scope to this）。你正在使用的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 = {};
    };
});

我希望这会有所帮助：）

Angular JS表单提交问题

4 个答案: