[英]error when pushing new element to array in javascript
我試圖將來自html表單元素的注釋添加到angularjs中的數組。 當我使用javascipt push函數時，出現錯誤“對象屬性不存在”。 有人可以幫我解決這個問題。 在下面，您可以找到我的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.newcomment = { rating : "", comment: "", author: "", date: new Date().toISOString() }; $scope.submitComment = function () { //Step 2: This is how you record the date $scope.dish.comments.push($scope.newcomment); } }]) ;
<!DOCTYPE html> <html lang="en" ng-app="confusionApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="styles/bootstrap-social.css" rel="stylesheet"> <link href="styles/mystyles.css" rel="stylesheet"> <!-- endbuild --> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row row-content" ng-controller="DishDetailController"> <div class="media" ng-model="dish"> <div class="media-left media-middle"> <a href="#"> <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza"> </a> </div> <div class="media-body"> <h2 class="media-heading"> {{dish.name}} <span class="label label-danger"> {{dish.label}} </span> <span class="badge"> {{dish.price | currency}} </span> </h2> <p>{{dish.description}}</p> </div> </div> </div> <br> <br> <br> <div class="col-xs-9 col-xs-offset-1" ng-controller="DishDetailController"> <h4>Customer Comments</h4> Sort by: <input type="text" ng-model="filterText"> <blockquote ng-repeat="commentla in dish.comments | orderBy: filterText"> <p class="mb-0"> {{commentla.rating}} Stars </p> <p class="mb-0">{{commentla.comment}}</p> <footer class="blockquote-footer"> {{commentla.author}} {{commentla.date | date: 'mediumDate'}} </footer> </blockquote> </div> </div> <div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController"> <ul class="list-unstyled"> Your Name: {{newcomment.author}} <br> Comment: {{newcomment.comment}} <br> Your Rating: {{newcomment.rating}} <!-- <p>Task 3: Here you include the code to show the live preview of the comment</p> <p>The comment should be shown only when the form contains valid information and is not pristine</p> --> </ul> <form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate> <div class="form-group"> <label for="yname" class="col-sm-2 control-label">Your Name:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="yname" aria-des <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1" ng-model="newcomment.rating"> 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2" ng-model="newcomment.rating"> 2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3" ng-model="newcomment.rating"> 3 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="4" ng-model="newcomment.rating"> 4 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="5" ng-model="newcomment.rating"> 5 </label> </div> </div> <div class="form-group"> <label for="commentm" class="col-sm-2 control-label">Your Comment</label> <div class="col-sm-10"> <textarea class="form-control" id="commentm" name="commentm" rows="12" ng-model="newcomment.comment"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary" ng-disabled="feedbackForm.$invalid">Submit Comment</button> </div> </div> </form> </div> </div> <!-- build:js scripts/main.js --> <script src="../bower_components/angular/angular.min.js"></script> <script src="scripts/app.js"></script> <!-- endbuild --> </body> </html>
我相信這與每個控制器的范圍有關。 當您的提交功能位於DishCommentController控制器中時，您將在DishDetailController中定義dish.comments 。
嘗試從DishCommentController控制器到DishDetailController控制器使用submitcomment函數，因為DishCommentController甚至沒有$ scope.dish.comments。
編輯：按照建議更新代碼后，請嘗試一下
.controller('DishDetailController', ['$scope', function($scope) {
var $scope.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"
}
...
]
};
$scope.newcomment = {
rating : "",
comment: "",
author: "",
date: new Date().toISOString()
};
$scope.submitComment = function (rating , author, stars, date) {
$scope.dish.comments.push($scope.newcomment);
}
}]);
我刪除了一些額外的代碼，您可以在以后開始添加這些代碼。
<div class="row row-content" ng-controller="DishDetailController">
<div class="col-xs-9 col-xs-offset-1">
<h4>Customer Comments</h4> Sort by:
<input type="text" ng-model="filterText">
<blockquote ng-repeat="commentla in dish.comments | orderBy: filterText">
<p class="mb-0"> {{commentla.rating}} Stars </p>
<p class="mb-0">{{commentla.comment}}</p>
<footer class="blockquote-footer"> {{commentla.author}} {{commentla.date | date: 'mediumDate'}} </footer>
</blockquote>
</div>
<div class="col-xs-9 col-xs-offset-1">
<ul class="list-unstyled">
Your Name: {{newcomment.author}}
<br>
Comment: {{newcomment.comment}}
<br>
Your Rating: {{newcomment.rating}}
</ul>
<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group">
<label for="yname" class="col-sm-2 control-label">Your Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="yname" aria-des <div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1" ng-model="newcomment.rating"> 1
</label>
..
</div>
<div class="form-group">
<label for="commentm" class="col-sm-2 control-label">Your Comment</label>
<div class="col-sm-10">
<textarea class="form-control" id="commentm" name="commentm" rows="12" ng-model="newcomment.comment"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="feedbackForm.$invalid">Submit Comment</button>
</div>
</div>
</form>
</div>
</div>
為什么在推送新元素時對我的 JavaScript 2D 數組進行排序？
[英]Why my JavaScript 2D array is being sorted when pushing a new element?
在javascript中推送新元素后丟失數組的最后一個元素
[英]Losing the last element of array after pushing a new one in javascript
修改javascript數組並將其推入數組將復制到數組中的每個元素
[英]Modifying the javascript array and pushing it into array is copying to every element in array
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.