CODEWITHSUNDEEP
javascripthtmlangularjs
lisarko8077
lisarko8077

Reputation: 307

add an object declared on the controller in Angular JS

i am an angularJS beginner and i have an issue. I want to add data to a media-object in html using an object declared in the script inside the controller, but i can't find which directive i must use.

Here is the code:

<!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">
            <div class="col-xs-12">
                <div class="media">
                  <div class="media-left media-middle">
                    <a href="#">
                      <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza">
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">{{dish.name}}<span class="label label-danger">{{dish.label}}</span><span class="badge">{{dish.price | currency}}</span></h4>
                    <p>{{dish.description}}</p>
                  </div>
                </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 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>

Could someone help me? I think it's something easy but know I have collapsed!

Thank you

Upvotes: 3

Views: 99

Answers (2)

Parthasarathy
Parthasarathy

Reputation: 2818

You have at least 2 options.

Option 1: Use $scope. This will make sure your html remains unchanged

app.controller('dishDetailController', function($scope) {
   // Your dish declaration
   $scope.dish = dish;
 });

Option 2: Javascript remains unchanged. In HTML, prefix dish with dishCtrl since you use dishDetailController as dishCtrl

Ex: Instead of <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza">, use

<img class="media-object img-thumbnail" ng-src={{dishCtrl.dish.image}} alt="Uthapizza">

Upvotes: 3

Shannon Hochkins
Shannon Hochkins

Reputation: 12186

It's not exactly clear what you're after, however I'm assuming that you just want to know how to change/update data inside the controller, and have it reflect inside the view?

Anything you add into your dish object, will be accessible under the dish property inside your html inside angularjs expressions.

Example:

app.controller('dishDetailController', function() {
    this.dish = {
        colour : 'blue'
    };
});

Then inside your view/html:

<div ng-controller="dishDetailController">
    {{dish.colour}}
</div>

If you're trying to use the comments as that is the only thing I could see that you have not implemented yet.

Inside your html you can do something like this:

<ul class="comments">
    <li class="comment" ng-repeat="comment in dish.comments">
        {{comment.comment}} - Author ({{comment.author}}) Rating : {{comment.rating}}
    </li>
</ul>

Upvotes: 1

Related Questions