Javascript Push和forms在AngularJS中

Javascript Push和forms在AngularJS中,javascript,angularjs,Javascript,Angularjs,我面临着这个问题,我有一个表格在下面,一些评论是作为列表块报价在我的网页上。我想做的是实时预览我在3个字段中写的内容,在我的表单上方需要两个字段,并与相同格式的其他注释对齐。评论包括名称、评级、评论和日期。所有这些都必须用Angular Js来完成。我面临的问题是,在我的app.js文件中,我有4个控制器,我在dishcomentcontroller中的一个字段中写入的内容无法放入dishcomentcontroller中的数组中。我也不知道如何设置当前日期 我的html代码格式如下: <

我面临着这个问题,我有一个表格在下面,一些评论是作为列表块报价在我的网页上。我想做的是实时预览我在3个字段中写的内容,在我的表单上方需要两个字段,并与相同格式的其他注释对齐。评论包括名称、评级、评论和日期。所有这些都必须用Angular Js来完成。我面临的问题是,在我的
app.js
文件中,我有4个控制器,我在
dishcomentcontroller
中的一个字段中写入的内容无法放入
dishcomentcontroller
中的数组中。我也不知道如何设置当前日期

我的html代码格式如下:

<div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController">
                <ul class="list-unstyled">
                    <li>

                      <blockquote>

                        <p><span ng-show="commentForm.$valid && !commentForm.$pristine">{{ userFeedback.userComment }}</span></p>

<footer>{{userFeedback.userName}}</footer>

                      </blockquote>    
                    </li>
                </ul>
            <form class="form-horizontal" name="commentForm"
                    ng-submit="submitComment()" novalidate>
                <!--task1-creating the form-->

                <div class="form-group" 
                     ng-class="{ 'has-error' : commentForm.firstname.$error.required && !commentForm.firstname.$pristine }"><!-- Task2:Angular validation with red color with the first control:"nameofForm.nameofField.$error.required" and the second control:"!nameofForm.nameofField.$pristine if user touched the form but didn't type anything. --> 
                    <label for="firstname" class="col-sm-2 control-label">Your Name</label>

                    <div class="col-sm-10">

                    <input type="text" class="form-control" id="firstname" name="firstname" placeholder="Enter Your Name" 
                           ng-model="userFeedback.userName" required> <!--bind the value of the input field to a variable with ng-model-->

                        <span ng-show="commentForm.firstname.$error.required && !commentForm.firstname.$pristine" class="help-block">Name field is required.</span> <!-- here we show the message under the field when we have error in our field -->

                    </div>

                </div>

                 <div class="form-group">

                    <label for="stars" class="col-sm-2 control-label">Number of Stars</label>

                     <div class="col-sm-10">

                        <label class="radio-inline">

                            <input type="radio" name="stars" id="stars" value="option1" ng-model="userFeedback.userRating">1</label>

                        <label class="radio-inline">

                            <input type="radio" name="stars" id="stars" value="option2" ng-model="userFeedback.userRating">2</label>

 <label class="radio-inline">
                            <input type="radio" name="stars" id="stars" value="option3" ng-model="userFeedback.userRating">3</label>

<label class="radio-inline">
                            <input type="radio" name="stars" id="stars" value="option4" ng-model="userFeedback.userRating">4</label>

<label class="radio-inline">
                            <input type="radio" name="stars" id="stars" value="option5" ng-model="userFeedback.userRating" ng-checked="true">5</label>

</div>

</div>

<div class="form-group"
                     ng-class="{'has-error' : commentForm.userComments.$error.required && !commentForm.userComments.$pristine}"><!-- Angular validation with red color with the first control:"nameofForm.nameofField.$error.required" and the second control:"!nameofForm.nameofField.$pristine if user touched the form but didn't type anything. --> 


<label for="userComments" class="col-sm-2 control-label">Your Comments</label>

<div class="col-sm-10">
                    <textarea class="form-control" id="userComments" name="userComments" rows="12" ng-model="userFeedback.userComment" required></textarea>

                        <span ng-show="commentForm.userComments.$error.required && !commentForm.userComments.$pristine" class="help-block">Comment field is required.</span> <!-- here we show the message under the field when we have error in our field -->

                    </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><!--submit button is disabled through ng-disabled until user enter all the required fields-->
                    </div>

                </div>
            </form><!-- end of task1 -->
        </div>

嗨,欢迎来到苏。你能修改一下代码格式吗?另外,为什么不能将`放入DishDetailController
中的数组中?(很抱歉,这不是我的专长,但我想你可能会出错?那是什么?)我也不知道如何设置当前日期。`-这是一个完全不同的问题,可能在博客圈的某个地方有答案。谢谢你的回答,但我找到了解决方案……我没有在控制器中嵌套,这就是为什么我无法得到我想要的结果……然而,代码的格式是固定的?我是新的,所以我想知道未来的问题或答案…谢谢,是的,新的格式看起来很棒,谢谢。对于未来,这是一个很好的参考;)
 .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.userFeedback = {userName:"",userComment:""};

 $scope.submitComment = function () {
     //Step 2: This is how you record the date
         $scope.userFeedback.userComment = new Date().toISOString();

      // Step 3: Push your comment into the dish's comment array
          console.log("so far correct");

          $scope.dish.comments.push($scope.userFeedback.userComments);

          console.log("so far correct");

     //Step 4: reset your form to pristine
    $scope.userFeedback.userName="";

    $scope.userFeedback.userComment="";

    $scope.commentForm.$setPristine();

    console.log("correct");


     //Step 5: reset your JavaScript object that holds your comment
      $scope.userFeedback = {userName:"",userComment:""};

      console.log("correct-end");
 }


}]);