i want push object array . not happening. pushing object comments (values of forms) on submit click, dish.comments of dishdetailcontroller. ng-controller="dishcommentcontroller" nested inside ng-controller="dishdetailcontroller" going wrong ?
main.html
<div class="row row-content" ng-controller="dishdetailcontroller menuctrl"> <div class="col-xs-12"> <ul class="media-list"> <li class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object img-thumbnail" ng-src={{menuctrl.dish.image}} alt="uthappizza"> </a> </div> <div class="media-body"> <h2 class="media-heading">{{menuctrl.dish.name}} <span class="label label-danger">{{menuctrl.dish.label}}</span> <span class="badge">{{menuctrl.dish.price | currency}}</span></h2> <p>{{menuctrl.dish.description}}</p> </div> </li> {{menuctrl.dishes}} </ul> </div> <div class="col-xs-9 col-xs-offset-1"> <div class="media-right"><h3 class="media-right">customer comments <small>sort by: <input type="text" ng-model="sort"></small></h3></div><br> <ul ng-repeat="comments in menuctrl.dish.comments | orderby:sort"> <blockquote> <div class="media-body"> <h3 class="media-heading">{{comments.rating}} stars</h3> <h4 class="media-heading"></h4> <p>{{comments.comment }}</p> <footer>{{comments.author}},<cite title="source title">{{comments.date | date:'mmm,dd,yyyy'}}</cite></footer> <p><li></li></p> </div> </blockquote> </ul> </div> <div class="col-xs-9 col-xs-offset-1" ng-controller="dishcommentcontroller comment"> <blockquote> <div class="media-body"> <h3 class="media-heading">{{star}} stars</h3> <h4 class="media-heading"></h4> <p>{{comm }}</p> <footer>{{name}},<cite title="source title">{{}}</cite></footer> <p><li></li></p> </div> </blockquote> <ul class="list-unstyled"> </ul> <form class="form-horizontal" name="commentform" ng-submit="submitcomment()" novalidate> <p><label>your name </label> <input type="textfield" name="name" ng-model="name" style="width:600px;"></p> <p><label>number of stars </label><span class="radio_star" ng-init="star=5"> <input type="radio" ng-model="star" value="1">1 <input type="radio" ng-model="star" value="2">2 <input type="radio" ng-model="star" value="3">3 <input type="radio" ng-model="star" value="4">4 <input type="radio" ng-model="star" value="5" checked> 5 </span> </p> <p><label style="vertical-align:top;">your comments </label> <textarea ng-model="comm" rows="4" cols="70"></textarea> </p> <p> <input type="button" ng-click="submitcomment()" value="comment" /> </p> </form> </div> app.js
'use strict'; angular.module('confusionapp',[]) .controller('dishdetailcontroller', ['$scope', function($scope) { var order=""; var dish={ name:'uthapizza', image: 'images/uthapizza.png', category: 'mains', label:'hot', price:'4.99', description:'a unique combination of indian uthappam (pancake) , italian pizza, topped cerignola olives, ripe vine cherry tomatoes, vidalia onion, guntur chillies , buffalo paneer.', comments: [ { rating:5, comment:"imagine eatables, living in confusion!", author:"john lemon", date:"2012-10-16t17:57:28.556094z" }, { rating:4, comment:"sends heaven, wish mother-in-law eat it!", author:"paul mcvites", date:"2014-09-05t17:57:28.556094z" }, { rating:3, comment:"eat it, eat it!", author:"michael jaikishan", date:"2015-02-13t17:57:28.556094z" }, { rating:4, comment:"ultimate, reaching stars!", author:"ringo starry", date:"2013-12-02t17:57:28.556094z" }, { rating:2, comment:"it's birthday, we're gonna party!", author:"25 cent", date:"2011-12-02t17:57:28.556094z" } ] }; this.dish = dish; }]) .controller('dishcommentcontroller', ['$scope', function($scope) { //step 1: create javascript object hold comment form $scope.submitcomment = function () { var d = new date(); var n = d.toisostring(); alert($scope.star); var comment={ comment:$scope.comm, rating:$scope.star, author:$scope.name, date:new date().toisostring()}; alert('toto'); //step 2: how record date // "the date property of javascript object holding comment" = new date().toisostring(); alert(comment); // step 3: push comment dish's comment array $scope.dish.comments.push(comment); alert($scope.name); //step 4: reset form pristine //step 5: reset javascript object holds comment }; }]) ;
if not mistaken have never created variable $scope.dish, variable var dish = ..., can't assign ;-)
Comments
Post a Comment