javascript - Starting with AngularJS using a ng-controller directive -
i'm trying make simple exercise doesn't work. think don't call controller variable appropriately. blocked. how can fix code? 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 dishdc"> <div class="col-xs-12"> <p>put 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 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>
ng-repeat expects array , iterate through it. passing object not array. change array of objects , must fine.
<div class="container"> <div class="row row-content" ng-controller="dishdetailcontroller dishdc"> <div class="col-xs-12"> <p>put 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 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>
Comments
Post a Comment