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