Как исправить этот код, чтобы показать содержимое на веб-странице? - PullRequest
0 голосов
/ 30 апреля 2019

Я прохожу курс на Coursera. В упражнении наставник напишите этот код и выполните этот код. Этот код предназначен для отображения списка продуктов питания. Даже в упражнении это сработало, но это не работает для меня. Я думаю, что сделал ошибку синтаксиса, хотя я не мог ее найти. Где я ошибся? Помогите мне найти ошибку этого кода.

<html lang="en" ng-app="confusionApp">

<head>

    <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">
        <div class="row row-content" ng-controller="menuController as menuCtrl">
            <div class="col-xs-12">
                <ul class="media-list">
                    <li class="media" ng-repeat="dish in menuCtrl.dishes">
                        <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>
                            <p>Comment: {{dish.comment}}</p>
                            <p>Type your comment:
                                <input type="text" ng-model="dish.comment">
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<script src="../bower_components/angular/angular.min.js"></script>
var app = angular.module("confusionApp", []);
app.controller("menuController", function() {
    var dishes = [
         {
           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.',
           comment: ''
        },
        {
           name:'Zucchipakoda',
           image: 'images/zucchipakoda.png',
           category: 'appetizer',
           label:'',
           price:'1.99',
           description:'Deep fried Zucchini coated with mildly 
             spiced Chickpea flour batter accompanied with a 
             sweet-tangy tamarind sauce',
           comment: ''
        },
        {
           name:'Vadonut',
           image: 'images/vadonut.png',
           category: 'appetizer',
           label:'New',
           price:'1.99',
           description:'A quintessential ConFusion experience, 
             is it a vada or is it a donut?',
           comment: ''
        },
        {
           name:'ElaiCheese Cake',
           image: 'images/elaicheesecake.png',
           category: 'dessert',
           label:'',
           price:'2.99',
           description:'A delectable, semi-sweet New York Style 
             Cheese Cake, with Graham cracker crust and spiced 
             with Indian cardamoms',
           comment: ''
        }
        ];
    this.dishes = dishes;
});

Я ожидаю, что кто-то обнаружил ошибку в моем коде, чтобы я мог переформатировать этот код и использовать его.

1 Ответ

0 голосов
/ 30 апреля 2019

var app = angular.module("confusionApp", []);
app.controller("menuController", function() {
    var dishes = [{
            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.',
            comment: ''
        },
        {
            name: 'Zucchipakoda',
            image: 'images/zucchipakoda.png',
            category: 'appetizer',
            label: '',
            price: '1.99',
            description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
            comment: ''
        },
        {
            name: 'Vadonut',
            image: 'images/vadonut.png',
            category: 'appetizer',
            label: 'New',
            price: '1.99',
            description: 'A quintessential ConFusion experience, is it a vada or is it a donut?',
            comment: ''
        },
        {
            name: 'ElaiCheese Cake',
            image: 'images/elaicheesecake.png',
            category: 'dessert',
            label: '',
            price: '2.99',
            description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
            comment: ''
        }
    ];
    this.dishes = dishes;
});
<html lang="en" ng-app="confusionApp">

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="row row-content" ng-controller="menuController as menuCtrl">
            <div class="col-xs-12">
                <ul class="media-list">
                    <li class="media" ng-repeat="dish in menuCtrl.dishes">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object img-thumbnail" ng-src="{{dish.image}}" alt="{{dish.name}}">
                            </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>
                            <p>Comment: {{dish.comment}}</p>
                            <p>Type your comment:
                                <input type="text" ng-model="dish.comment">
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>

Пожалуйста, проверьте ниже код.Я добавил несколько js и css и сделал это работоспособным.Пожалуйста, проверьте код и измените URL изображения соответственно.Все, что вам нужно сделать, это сделать описание подробно в одну строку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...