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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -