Having trouble with your angular.jg ng controller functioning properly?

Having trouble getting any content to show up from the media object!

The plate object seems to be malfunctioning.

<!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">
        <title>Ristorante Con Fusion: Menu</title>
        <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">
    </head>
    <body>
        <div class="container" ng-controller="dishDetailController">
            <div class="row row-content">
                <div class="col-xs-12">
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#"><img class="media-object img-thumbnail" ng-src={{plate.image}} alt="Uthappizza"></a>
                        </div>
                        <div class="media-body">
                            <h2 class="media-heading">{{plate.name}}
                                <span class="label label-danger">{{plate.label}}</span>
                                <span class="badge"{{plate.price | currency}}></span></h2>
                                <p>{{plate.description}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-9 col-xs-offset-1">
                    <p>Insert 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 plate = {
                    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.plate = plate;
            });
        </script>
    </body>
    </html>
javascriptangularjsng-controller

Answer №1

Make sure to implement the Controller as syntax in this scenario,

 <div class="container" ng-controller="dishDetailController as dish">

EXAMPLE

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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="confusionApp" ng-controller="dishDetailController as dish">
<div class="row row-content">
<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.dish.image}} alt="Uthappizza"></a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.dish.name}}
<span class="label label-danger">{{dish.dish.label}}</span>
<span class="badge"> {{dish.dish.price | currency}}</span></h2>
<p>{{dish.dish.description}}</p>
</div>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p>Include the comments here</p>
</div>
</div>
</div>

Answer №2

Consider assigning the dish object to the variable $scope.dish rather than using this.

$scope.dish = dish;

Answer №3

To make your variable available in AngularJS, you must inject $scope into the function and assign your variable object to $scope. Here is an example of how to do this:

    <!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">
            <title>Ristorante Con Fusion: Menu</title>
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

        </head>
        <body>
            <div class="container" ng-controller="dishDetailController">
                <div class="row row-content">
                    <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="Uthappizza"></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>
                        </div>
                    </div>
                    <div class="col-xs-9 col-xs-offset-1">
                        <p>Put the comments here</p>
                    </div>
                </div>
            </div>

            <script>
                var app = angular.module('confusionApp',[]);
                app.controller('dishDetailController', function($scope) {
                    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"
                             }
                        ]
                    };
                     $scope.dish = dish;
                });
            </script>
        </body>
        </html>

Answer №4

The issue lies in not assigning a scope variable to the dish object. Instead of using this.dish, it should be $scope.dish. Below is the updated controller function that should address this problem.

app.controller('dishDetailController', function($scope) {
                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"
                         }
                    ]
                };
                $scope.dish = dish;
            });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inconsistent alignment and formatting of fields in Bootstrap jQuery form

I need assistance with creating a form that includes three input fields: first name, last name, and email. Additionally, I would like to provide users with the option to add more groups of input fields. Currently, the three fields and the button are displ ...

javascriptjquerybootstrap-4

Having trouble establishing a basic websocket connection in NodeJS

I am currently following a tutorial on WebSocket protocol development from this link: . Upon visiting localhost:1337/index.html, I encountered the following error: This localhost page cannot be found. No webpage was found for the web address: http://loc ...

javascriptnode.jswebsocket

Get the image resolution at the same time

I need a function that can take a URL pointing to an image as a parameter and synchronously provide the resolution of that image. The function should pause execution until the image is fully retrieved. Here is an example of what I'm looking for: func ...

javascriptjquery

Guide for displaying and hiding an image using a button or link in Next.js

I'm a beginner with React and Next.js, and I have the following code snippet: import Link from 'next/link'; import Image from 'next/image'; async function getPokedex() { const response = await fetch(`http://localhost:3000/api/p ...

javascriptreactjsnode.jsnext.js

Struggling with running my React App as I'm encountering some errors

Check out the code on Github: https://github.com/bhatvikrant/IndecisionApp I have already run npm i and then executed yarn run dev-server, utilizing webpack. My operating system is MacOs. I have also created the .babelrc file. The issue I encountered aft ...

javascriptreactjsnpmwebpackbabeljs

Triggering server-side code (node.js) by clicking a button in an HTML page created with Jade

I am currently working on developing a web application and have encountered an issue where I need to execute some server-side code when a button is clicked (using the onClick event handler rather than the Submit button). My tech stack includes Node.js, Exp ...

javascriptjquerynode.jsexpresspug

Encountering Challenges when Implementing Next.js with Jest

When attempting to run a test in next.js using jest, an error keeps appearing: The issue may be due to the wrong test environment being used. Refer to https://jestjs.io/docs/configuration#testenvironment-string for more information. Consider utilizing the ...

javascriptreactjsnext.jsjestjs

Developing an if-else statement to showcase a different div depending on the URL

Having trouble with an if/else statement to display one div or another based on the URL: No matter what I try, only "Div 1" keeps showing. Here's my code snippet: <script> if (window.location.href.indexOf("pink") > -1) { document.getElemen ...

javascripthtmlif-statement

Removing items in vue.js

I'm currently in the process of learning Vue.js. This is my first attempt at creating a small to-do application, and I am encountering issues with deleting each individual task upon clicking. Despite watching multiple YouTube tutorials, I have not bee ...

javascriptvue.js

Getting rid of a texture in three.js

I am attempting to deallocate a texture once it has been loaded in three.js. The texture is loaded using var tex = THREE.ImageUtils.loadTexture("image.png"); and it is being displayed correctly. However, when I attempt to use: tex.dispose(); I consist ...

javascriptthree.jswebgl

Language translation API specifically designed to convert text content excluding any HTML formatting

I have a dilemma with translating text content in an HTML file into multiple languages based on user input. To accomplish this, I am utilizing the Microsoft Translator AJAX interface. The structure of my HTML file looks something like this; <h1>< ...

javascripthtmlajaxgoogle-translatemicrosoft-translator

Is it possible to link the _id of a mongodb array to its corresponding clientId in another array?

I am facing a challenge with 2 arrays retrieved from my MongoDB database. The first array is called users and it contains user objects structured like this: [{ email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a1beb ...

javascriptreactjsmongodb

Differentiating the angular distinction between setting a variable with ng-click and invoking a function

I've encountered a situation like this before. Let's assume the controller has these variables: $scope.valueArr = ['Hello', 'No', 'Yes']; $scope.myValue = 'Hello'; And there is an ng-repeat as follows: ...

javascriptangularjsangularjs-ng-click

What is causing Mocha.js to be unable to locate the module?

Having trouble with mocha.js not being able to locate my path! Here's the directory structure I have set up for my node course project: ///////Root --package.json --node_modules/ --playground --server -server.js -db -models ...

javascriptnode.jstestingnpmmocha.js

Trouble with window.location functionality following an AJAX request

After a successful response from an AJAX request, the window.location method is not working as expected. However, when I debug step by step in Firefox, the window.location works fine. function login(){ var jason ={"usuario":document.getElementById("inp ...

javascriptjqueryajax

The compression feature in express.js middleware is not functioning correctly

The middlewares set up in my app are as follows: app.use(express.favicon(__dirname + '/static/public/images/favicon.ico')); app.use(express.compress()); app.use(express.json()); app.use(express.urlencoded()); app.use(express.cookieParser('S ...

javascriptnode.jsexpressgzip

The dropdown menu in Mantine is malfunctioning, even though I copied and pasted the exact code from

While following a tutorial, I encountered an issue with the Mantine Menu and Dropdown components. The tutorial creator did not wrap the React App inside the MantineProvider, which resulted in errors when trying to use the Dropdown component. Even after add ...

javascriptreactjsnode.jsexpressmantine

When scrolling, dynamically change the background color by adding a class

I am looking to achieve a scroll effect where the color of the menu buttons changes. Perhaps by adding a class when scrolling and hitting the element? Each menu button and corresponding div has a unique ID. Can anyone suggest what JavaScript code I should ...

javascripthtmlcss

activate a specific tab within a tab container using JavaScript

Having an issue with the JavaScript function below that I am using to set active ASP.NET tabs. Whenever I run the code, it always returns CurrentTab as "null". Can anyone help me solve this problem? function SetActiveTab2(tabNumber) { try { ...

c#javascriptasp.netc#-4.0ajaxcontroltoolkit

"Encountering difficulties while trying to modify the QuillNoSSRWrapper value within a Reactjs

Currently, I am working on a project involving ReactJS and I have opted to use the Next.js framework. As of now, I am focused on implementing the "update module" (blog update) functionality with the editor component called QuillNoSSRWrapper. The issue I ...

javascriptreactjsnext.js