Starting with AngularJS using a ng-controller directive
Question
I'm trying make a simple exercise but it doesn't work. I think I don't call controller variable appropriately. I am blocked. How can I fix this code? The result page show me: {{dish.name}} {{dish.label}} {{dish.price | currency}}
<html lang="en" ng-app="a">
<head>.... </head>
<body>
<div class="container">
<div class="row row-content" ng-controller="dishDetailController as dishDC">
<div class="col-xs-12">
<p>Put the dish details here</p>
<div class="media-body">
<ul class="media-list">
<li class="media" ng-repeat="dish in dishDC.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="a">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p>Put the comments here</p>
</div>
</div>
</div>
<script src="../bower_components/angular/angular.min.js"></script>
<script>
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
var dishes={
name:'a',
image: 'images/a.png',
category: 'a',
label:'a',
price:'7.88',
description:'a',
};
this.dishes = dishes;
});
</script>
</body>
</html>
2 answers
solution1
1 2016-02-08 23:54:29
ng-repeat expects an array and will iterate through it. You are passing an object which is not an array. Change it to an array of objects and it must be fine.
<div class="container">
<div class="row row-content" ng-controller="dishDetailController as dishDC">
<div class="col-xs-12">
<p>Put the dish details here</p>
<div class="media-body">
<ul class="media-list">
<li class="media" ng-repeat="dish in dishDC.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="a">
</a>
</div>
{{dish.name}}
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p>Put the comments here</p>
</div>
</div>
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function() {
this.dishes=[{
name:'James',
image: 'images/James.png',
category: 'HouseHold',
label:'Lab',
price:'7.88',
description:'Desc',
}];
});
</script>
solution2
0 2016-02-07 21:25:07
I think it might be because you have not defined the ng-app directive for the application.
Try adding confusionApp in your ng-app like this:
<html lang="en" ng-app="confusionApp">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.