个人中心
gpt4 book ai didi

angularjs - 如何修复此代码以在网页上显示内容？

转载 作者：行者123 更新时间：2023-11-28 00:02:27 31 4
gpt4 key购买 nike

我正在上 coursera 类(class)。在练习指导中编写此代码并执行此代码。此代码旨在显示食品列表。即使在练习中它也有效，但这对我不起作用。我想我犯了一个语法错误，即使我找不到它。我在哪里弄错了？帮我找出这段代码的错误。

<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;
});

我希望有人发现我的代码错误，以便我可以重新格式化此代码并使用它。

最佳答案 

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。您需要做的就是在一行中详细描述。

关于angularjs - 如何修复此代码以在网页上显示内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55927828/

31 4 0
文章推荐： javascript - Threejs TubeGeometry : Applying custom curve causes unexpected twisting
文章推荐： c++ - std::endl 不适用于重载的运算符<<，尽管实现了专用的非模板函数
文章推荐： javascript - Click() jQuery 函数不适用于简单的 div
文章推荐： javascript - 为什么文件下载重定向会触发 Angular ui-router 否则规则？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com