如何在角度JS中将数据推送到嵌套数组中，然后将整个数据排序在一起

Question

下面是我的 HTML 页面，我试图从控制器获取数据并显示在页面上，稍后用户提交评论广告，cmets 被添加到现有数据中，并按日期、作者或评级排序。

执行此操作时，我在推送时收到未定义的错误。我哪里错了

<div class="container" ng-controller="DishDetailController">
    <div class="row row-content" ng-repeat="food in dish">
        <div class="col-xs-12">
                <div class="media" >
                <div class="media-left media-middle">
                    <a href="#">
                    <img class="media-object"
                     ng-src={{food.image}} alt="Uthappizza">
                    </a>
                </div>
                <div class="media-body">
                    <h2 class="media-heading">{{food.name}}
                     <span class="label label-danger label-xs">{{food.label}}</span>
                     <span class="badge">{{food.price | currency}}</span></h2>
                    <p>{{food.description}}</p>
                </div>
            </div>
        </div>
        <div class="col-xs-9 col-xs-offset-1">
            <h4>Customer comments &nbsp &nbsp &nbsp <small>  Sort by <input type="text" ng-model="sortBy"></small></h4>

            <ul class="list-unstyled">
             <li>
            <blockquote ng-repeat="commen in food.comments|orderBy:sortBy">
            <p>{{commen.rating}} Stars</p>
              <p>{{commen.comment}}</p>
              <footer>{{commen.author}}  <cite>{{commen.date| date:'mediumDate'}}</cite></footer>
            </blockquote>
            </li>
            </ul>
        </div>
        <div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController">
                <ul class="list-unstyled" ng-show="commentForm.$valid && submitted">
                    <li>
                    <blockquote>
                        <p>{{putComment.rating}} Stars</p>
                         <p>{{putComment.comment}}</p>
                       <footer>{{putComment.author}}, <cite>{{putComment.date| date:'mediumDate'}}</cite></footer>
                     </blockquote>
                    </li>
               </ul>
            <form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
                <div class="form-group" ng-class="{'has-error' : commentForm.fullName.$error.required && !commentForm.fullName.$pristine }">
                    <label for="fullName" class="col-sm-2 control-label"> Your Name </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="fullName" id="fullname" ng-model="putComment.author" required>   
                        <span ng-show="commentForm.fullName.$error.required && !commentForm.fullName.$pristine" class="help-block">Your Name is required.</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label"> Number of Stars </label>
                 <div class="col-sm-10">
                    <label class="radio-inline"><input type="radio" name="stars" value="1" ng-model="putComment.rating">1</label>
                    <label class="radio-inline"><input type="radio" name="stars" value="2" ng-model="putComment.rating">2</label>
                    <label class="radio-inline"><input type="radio" name="stars" value="3" ng-model="putComment.rating">3</label>
                    <label class="radio-inline"><input type="radio" name="stars" value="4" ng-model="putComment.rating">4</label>
                    <label class="radio-inline"><input type="radio" name="stars" value="5" ng-model="putComment.rating">5</label>
                 </div>
               </div>
                <div class="form-group" ng-class= "{'has-error': commentForm.feedback.$error.required && !commentForm.feedback.$pristine }">
                    <label for="feedback" class="col-sm-2 control-label">Your Feedback</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="feedback" name="feedback" rows="12" ng-model="putComment.comment" required>
                        </textarea>
                        <span ng-show="commentForm.feedback.$error.required && !commentForm.feedback.$pristine" class="help-block">Comments are required.</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

下面是我的控制器代码。当我登录控制台 this-console.log($scope.dish.cmets) 时，我也得到未定义，而我得到这个 console.log($scope.dish) 的数据

    .controller('DishDetailController', ['$scope', function($scope) {

           $scope.sortBy="";

            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.submitted=false;


         $scope.putComment = { rating:5, comment:"", author:"", date:"" };

        $scope.submitComment = function () {


        $scope.putComment.date= new Date().toISOString();

        console.log($scope.putComment);
        console.log($scope.dish.comments);

        $scope.dish.comments.push($scope.putComment);

          $scope.commentForm.$setPristine();

          $scope.submitted=true;

         $scope.putComment={rating:5, comment:"", author:"", date:""};

            } 
         }]);

Answer 1

我通过更改以下代码来实现此功能：

$scope.dish.comments.push($scope.putComment);

低于一个

$scope.dish[0].comments.push($scope.putComment);