The code below does not display my images. It works for a similar file but this its giving me fits. I believe I am not using the directive. properly. please let me know if I need to provide more info. In my editor I see the image for file so the image location is recognized by html page.
<!DOCTYPE html><html lang="en" ng-app="confusionApp"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Ristorante Con Fusion: Menu</title> <!-- Bootstrap --> <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="styles/bootstrap-social.css" rel="stylesheet"> <link href="styles/mystyles.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--></head><body> <div class="container"> <div class="row row-content" ng-controller="dishDetailController as dishCtrl"> <li class="media" ng-model="dishc in dishCtrl.dish" > <!--| filter:menuCtrl.filtText">--> <div class="media-left media-middle"> <a href="#"> <img class="media-object img-thumbnail" ng-src={{dishc.image}} alt="Uthappizza"> </a> </div> <div class="media-body"> <h2 class="media-heading">{{dishc.name}} <span class="label label-danger">{{dishc.label}}</span> <span class="badge">{{dishc.price | currency}}</span></h2> <p>{{dishc.description}}</p> </div> </li> </div> </div> <div class="col-xs-9 col-xs-offset-1"> <p>Put the comments here</p> </div> <script src="../bower_components/angular/angular.min.js"></script> <script> var app = angular.module('confusionApp',[]); app.controller('dishDetailController', function() { var 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" } ] }; this.dish = dish; }); </script></body></html>
I tried ng-repeat and the result was worst. Here is my result
Also i only have 1 dish item as you can see below in the code.
here is what the final product should look like.
ng-model is for binding a view element to your model - i.e. elements that have a value.
To access the view for output or expressions you either use the controllerAs prefix to dereference the property you want in your controller - or if you are not using controller as (scope) then you can refer to the property directly.
Open in new window
You are using an ng-model instead of ng-repeat. Should beOpen in new window