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>

Ranjith V · Accepted Answer · 2016-02-08 23:54:29Z

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>

1313 · Accepted Answer · 2016-02-07 21:25:07Z

0

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">

answered Feb 7, 2016 at 21:25

1313

1151 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

Starting with AngularJS using a ng-controller directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related