Object created via AngularJs is not appearing on web page

Question

Here is my code. Please tell me where am I wrong. The object dish is not shown when i load the webpage. The webpage remains blank only. I am using AngularJs.

<!DOCTYPE html>
<html lang="en" ng-app>

<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 rel="stylesheet" href="hk.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-social.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row info" ng-init="dish={name:'Uthapizza',
                                         image:'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.',
                                         comment:''}">
        <div class="col-md-12">
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#"><img class="img-thumbnail media-object" ng-src={{dish.image}}></a>
                </div>
                <div class="media-body">
                    <h2 class="media-heading">{{dish.name}}<span class="label label-dangerous label-xs">{{dish.label}}</span><span class="badge">{{dish.price}}</span></h2>
                    <p>{{dish.description}}</p>
                </div>
            </div>
         </div>
    </div>
 </div>

Don't forget to add ng-controller. I don't see it in your code. — user5699040
– user5699040, Commented Jun 26, 2016 at 10:18
@ArmenAvetisyan why do we need an ng-controller? I thought it worked without any ng-controller. — SHIVANG AGARWAL
– SHIVANG AGARWAL, Commented Jun 26, 2016 at 19:29
@SHIVANGAGARWAL I edited my answer with new information about why using a controller. It works without but its still recommended — Jaqen H'ghar
– Jaqen H'ghar, Commented Jun 26, 2016 at 19:42

Jaqen H'ghar · Accepted Answer · 2016-06-26 20:09:45Z

1

There's a missing , in ng-init json object:

angular.js:13424 Error: [$parse:syntax] Syntax Error: Token 'description' is unexpected, expecting [}] at column 317 of the expression [dish={name:'Uthapizza', image:'uthapizza.png',

Add , before description

price:'4.99',
description:'A unique combination of ....

A side note:

Using ng-init is ok for test purposes but later on consider using a controller instead. See AngularJS ng-init docs:

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.

See your ngInit transformed to controller here JSFiddle

edited Jun 26, 2016 at 20:09

answered Jun 26, 2016 at 10:24

Jaqen H'ghar

17k8 gold badges52 silver badges53 bronze badges

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

1 Comment

SHIVANG AGARWAL Over a year ago

Thanks a lot for pointing that out, i would never have got it. It works alright now. Thanks!

Deepanjan · Accepted Answer · 2016-06-26 10:50:00Z

Here is the plnkr working absolutely fine

http://plnkr.co/edit/IgjAHFOP27qhmEp75yNE?p=preview

<div class="container">
    <div class="row info" ng-controller="demo">
        <div class="col-md-12">
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#"><img class="img-thumbnail media-object" ng-src={{dish.image}}></a>
                </div>
                <div class="media-body">
                    <h2 class="media-heading">{{dish.name}}<span class="label label-dangerous label-xs">{{dish.label}}</span><span class="badge">{{dish.price}}</span></h2>
                    <p>{{dish.description}}</p>
                </div>
            </div>
         </div>
    </div>
 </div>

Collectives™ on Stack Overflow

Object created via AngularJs is not appearing on web page

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related