使用$ scope-Angular Js

Question

I learned what $scope means,and now from now on I am going to use it in my code. However,nothing is displayed in my browser,when I am trying to read the json objects. The code is in the link shown.

https://jsfiddle.net/jgou7j0p/

<div class="container">
    <div class="row row-content" ng-controller="DishDetailController">
        <div class="col-xs-12">
            <div class="media">
              <div class="media-left media-middle">
                 <img ng-src={{dish.image}} class="media-object img-thumbnail">
              </div>
              <div class="media-body">
                  <div class="media-heading">
                  <h2>{{dish.name}}
                    <span class="label label-danger label-xs"> {{dish.label}}</span> 
                    <span class="badge"> {{dish.price | currency}}</span>
                  </h2>
                  <p>{{dish.description}}</p>
                  </div>    
              </div>    
            </div>
        </div>
        <div class="col-xs-9 col-xs-offset-1">
            <div class = "row">
            <div class = "col-xs-6">
              <h3>Customer Comments</h3>
            </div>
            <div class = "col-xs-6" style="margin-top: 20px;">
              <form class="form-inline" role="form">
                <div class="form-group">
                  <label class="control-label">Sort by:</label>
                  <input type="text" class="form-control" ng-model="sorting">
                </div>
              </form>
            </div>
          </div>
            <div class="row">
                <div class="col-xs-12">
                  <blockquote ng-repeat="comment in dish.comments | orderBy: sorting">
                    <p>{{comment.rating}} Stars</p>
                    <p>{{comment.comment}}</p>  
                    <footer>{{comment.author}}, {{comment.date | date:'MMM. dd, yyyy'}}</footer> 
                  </blockquote>
                </div>
            </div>
        </div>
    </div>

</div>

and the js code.

<script>

    angular.module('confusionApp',[])

           .controller('DishDetailController',['$scope', function($scope) {

            $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"
                               },
                               {
                                   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;
            $scope.sorting = '';

        }]);

Any ideas what could be wrong?

Thanks,

Theo.

Answer 1

You are setting $scope.dish to and object but then you do $scope.dish = dish ? That is your problem.

Remove the final $scope.dish = dish and you should be good.

Here is a fiddle to illustrate.

As aptly mentioned in a comment above by @Makoto, if you are learning Angular you may as well try to use controller as syntax notation. Look and this very good post to learn more about it. Good luck!

Answer 2

remove this line $scope.dish = dish; then I think it will work..

and assign at the top <div class="container" ng-app="confusionApp">