Using $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.

Ironically, $scope fell out of favor a long time ago...

Makoto
– Makoto

2017-02-21 16:09:24 +00:00
Commented Feb 21, 2017 at 16:09 — Makoto
– Makoto, Commented Feb 21, 2017 at 16:09

Jax · Accepted Answer · 2017-02-21 16:48:39Z

5

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!

edited Feb 21, 2017 at 16:48

answered Feb 21, 2017 at 16:11

Jax

1,8373 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurabh Agrawal · Accepted Answer · 2017-02-21 16:10:23Z

1

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

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

answered Feb 21, 2017 at 16:10

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Collectives™ on Stack Overflow

Using $scope - Angular Js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related