javascript - 在 AngularJS 中将数据推送到数组-6ren

javascript - 在 AngularJS 中将数据推送到数组

转载作者：行者123 更新时间：2023-11-30 11:52:41

<分区>

我有一个用户需要填写并提交的表单。单击“提交”按钮后，应触发将数据推送到数组的函数，但我没有运气将其推送到数组中。需要压入数据的数组在另一个controller中。

调试代码时我发现我遇到了这个错误。

Cannot read property 'comments' of undefined
    at n.$scope.submitComment (app.js:167)

JavaScript/HTML

.controller('DishDetailController', ['$scope', function($scope) {
    var dish = {
        name: 'Uthapizza',
        image: 'images/uthapizza.png',
        category: 'mains',
        label: 'Hot',
        price: '4.99',
        description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
        comments: [{
                rating: 5,
                comment: "Imagine all the eatables, living in conFusion!",
                author: "John Lemon",
                date: "2012-10-16T17:57:28.556094Z"
            }, {
                rating: 4,
                comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                author: "Paul McVites",
                date: "2014-09-05T17:57:28.556094Z"
            }, {
                rating: 3,
                comment: "Eat it, just eat it!",
                author: "Michael Jaikishan",
                date: "2015-02-13T17:57:28.556094Z"
            }, {
                rating: 4,
                comment: "Ultimate, Reaching for the stars!",
                author: "Ringo Starry",
                date: "2013-12-02T17:57:28.556094Z"
            }, {
                rating: 2,
                comment: "It's your birthday, we're gonna party!",
                author: "25 Cent",
                date: "2011-12-02T17:57:28.556094Z"
            }

        ]
    };

    $scope.dish = dish;
}]);

.controller('DishCommentController', ['$scope', function($scope) {
    $scope.feedback = {
        author: "",
        rating: "",
        comment: "",
        feedbackDate: ""
    };
    $scope.submitComment = function() {
        $scope.feedback.feedbackDate = new Date().toISOString();
        $scope.dish.comments.push($scope.feedback);
    }
}]);

    <div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController">
        <div class="col-xs-12">
            <form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
                <div class="form-group form-inline" ng-class="{ 'has-error' : commentForm.author.$error.required && !commentForm.author.$pristine }">
                    <label for="author">Your Name</label>
                    <input type="text" class="form-control" id="author" name="author" placeholder="Enter Your Name" ng-model="feedback.author" required> <span ng-show="commentForm.author.$error.required && !commentForm.author.$pristine" class="help-block">Your name is required</span>
                </div>
                <div class="form-group" ng-init="feedback.rating=5">
                    <label for="rating">Number Of Stars</label>
                    <input type="radio" name="rating" id="rating" value="1" ng-model="feedback.rating"> 1 </label>
                    <input type="radio" name="rating" id="rating" value="2" ng-model="feedback.rating"> 2 </label>
                    <input type="radio" name="rating" id="rating" value="3" ng-model="feedback.rating"> 3 </label>
                    <input type="radio" name="rating" id="rating" value="4" ng-model="feedback.rating"> 4 </label>
                    <input type="radio" name="rating" id="rating" value="5" ng-model="feedback.rating"> 5 </label>
                </div>
                <div class="form-group form-inline" ng-class="{ 'has-error' : commentForm.comment.$error.required && !commentForm.comment.$pristine}">
                    <label for="comment">Your Comment</label>
                    <textarea id="comment" name="comment" ng-model="feedback.comment" class="form-control" rows="3" placeholder="Your Comment" required></textarea>
                    <span ng-show="commentForm.comment.$error.required && !commentForm.comment.$pristine" class="help-block">Your comment is required</span>
                </div>
                <button type="submit" ng-disabled="commentForm.$invalid" class="btn btn-primary">Submit Comment</button>
            </form>
        </div>
    </div>

文章推荐： javascript - c3.js:通过另一个数据源更改散点图半径？

文章推荐： javascript - React onClick 状态不会切换回来

文章推荐： javascript - 如何在页面加载时调用 AJAX 函数

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 AngularJS 中将数据推送到数组