javascript - 在 Angular JS 的 Controller 上添加一个声明的对象-6ren

javascript - 在 Angular JS 的 Controller 上添加一个声明的对象

转载作者：搜寻专家更新时间：2023-10-31 23:21:53

25

4

我是一个 angularJS 初学者，我有一个问题。我想使用 Controller 内脚本中声明的对象将数据添加到 html 中的媒体对象，但我找不到必须使用哪个指令。

代码如下:

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

有人可以帮助我吗？我认为这很容易，但我知道我已经崩溃了!

谢谢

最佳答案

您至少有 2 个选项。

选项 1:使用 $scope。这将确保您的 html 保持不变

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

选项 2:Javascript 保持不变。在 HTML 中，由于使用 dishDetailController as dishCtrl，因此在 dish 前加上 dishCtrl

例如:代替<img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza"> , 使用

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

关于javascript - 在 Angular JS 的 Controller 上添加一个声明的对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39198485/

25

4

0

文章推荐： php - # 和//在 PHP 中的区别？

文章推荐： node.js - 使用 Mongo/Express/Angular/Node 推送到模型中的数组

文章推荐： php - 在 Heroku PHP 上设置新遗迹

文章推荐： node.js - 尝试在命令行创建一个 Express 应用程序

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

首页

博学

6Ren·AI

商城

javascript - 在 Angular JS 的 Controller 上添加一个声明的对象