如何将数据推送到json服务器，然后将其显示在Angular / ionic的html页面中

Question

I am trying to make a dummy restaurant app using Angular/Ionic 1. I have created a modal to add comments and then i am pushing those comments to json server. I am trying to display the newly added comment in the html page along with other comments already being there. The comment is getting pushed to json file but i am not able to display it on html page. After the modal gets closed, the page gets stuck. How do i get to display the newly added comment?

modal html code as below:

    <ion-modal-view>
<ion-header-bar>
  <h1 class="title">Add Comments</h1>
   <div class="buttons">
        <button class="button button-stable button-clear"ng-click="closeComment()">Close</button>
    </div>
</ion-header-bar>

  <ion-content>
    <form id="addCommentForm" name="addCommentForm" ng-submit="submitComments()">
    <div class="list">
        <label class="item item-input item-select">
            <span class="input-label">Rating</span>
            <select ng-model="mycomment.rating">
                <option ng-repeat="n in [1,2,3,4,5]" value="{{n}}">
                    {{n}}</option>
            </select>
        </label>
        <label class="item item-input">
             <span class="input-label">Name</span>
            <input type="text" ng-model="mycomment.author">
        </label>
        <label class="item item-input">
            <span class="input-label">Comment</span>
            <textarea placeholder=""ng-model="mycomment.comment"></textarea>
        </label>
        <label class="item">
             <button class="button button-block button-positive" type="submit">Add Comment</button>
        </label>
    </div>
</form>
</ion-content>

Controller code as below:

     $scope.mycomment = {rating:5, comments:"", author:"", date:""};

           $ionicModal.fromTemplateUrl('templates/dish-comment.html', {
              scope: $scope,
              animation: 'slide-in-up'
            }).then(function(modal) {
              $scope.addComment = modal;
            });
            $scope.openComment = function() {
              $scope.addComment.show();
              $scope.popover.hide();
            };

            $scope.closeComment = function() {
              $scope.addComment.hide();
            };


            $scope.submitComments = function () {

            $scope.mycomment.date = new Date().toISOString();
            console.log($scope.mycomment);

            $scope.dish.comments.push($scope.mycomment);
         menuFactory.getDishes().update({id:$scope.dish.id},$scope.dish);


            $scope.mycomment = {rating:5, comment:"", author:"", date:""};
            $scope.addComment.hide();
        }
            $scope.$watch('dish.comments', function() {
                $scope.test = $scope.dish.comments;
                console.log($scope.test);
                });

Below is the html page where i am trying to display the code

    <div class="card">
      <div class="item item-body item-text-wrap">
           <img class="full-image" ng-src="{{baseURL+dish.image}}" alt="Uthappizza">
            <h2>{{dish.name}}
             <span style="font-size:75%">{{dish.price | currency}}</span>
            <span class="badge badge-assertive">{{dish.label}}</span></h2>
            <p>{{dish.description}}</p>
      </div>
  </div>
  <div class="row">
        <div class="col col-offset-10">
               <h4>Customer Comments &nbsp;&nbsp;&nbsp;
                   <small>Sort by: &nbsp;
                         <input type="text" ng-model="orderText">
                      </small></h4>
                <ul class="list">
                    <li ng-repeat="comment in dish.comments | orderBy:orderText">
                      <blockquote>
                         <p>{{comment.rating}} Stars</p>
                         <p>{{comment.comment}}</p>
                         <footer>{{comment.author}}, {{comment.date | date:'MMM. dd, yyyy'}}</footer>
                      </blockquote>
                    </li>
                </ul>
        </div>
  </div>

Below is my json file code, the last comment was newly added, but not showing in the html page.

     {
"id": 3,
"name": "ElaiCheese Cake",
"image": "images/elaicheesecake.png",
"category": "dessert",
"label": "",
"price": "2.99",
"description": "A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms",
"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"
  },
  {
    "rating": "3",
    "comments": "Wonderful",
    "author": "Henna",
    "date": "2017-01-12T11:20:04.825Z"
  }
]

}

Here is the recording of the app, i am trying to show that the screen freezes after the modal is closed with/without adding the comment

    https://i.stack.imgur.com/2lQhI.gif

Answer 1

So the page gets stuck with the oldest JSONS but doesn't display the newest data? If thats the problem you can make a $watch function to always watch the $scope , so that way you can alway be monitoring the latest inserted data.

Answer 2

The code looks nice except for one thing, you are saving your modal instance in $scope.addComment variable and then naming your form the same name="addComment" . In angular, the form is saved in a scope variable with it's name; so basically it's trying to save the form AND the modal in $scope.addComment .

You should change the modal's or the form's name and try again, because probably when you submit the form, it gets saved in $scope.addComment and steps the modal instance, then you can't use it to close the modal.

EDIT: Apparently there is a known issue/unfixed bug with the ionic popover and the ionic modal. What you have to do is close the popover and don't open the modal until the next cycle. You can achive that with $timeout or, even better, using a promise:

$scope.openComment = function () {
    $scope.popover.hide().then(openModal);
};

function openModal(){
    $scope.addComment.show();
}