AngularJS - {{}} 中未显示对象值答案

【问题标题】：AngularJS - object values not show in {{}}AngularJS - {{}} 中未显示对象值
【发布时间】：2017-02-26 17:34:33
【问题描述】：

我必须在 {{}} 中显示来自 Json 的一些值，但我看到这些值仅显示在控制台和 app.controller 中。它只是关闭了这个 app.controller 并且没有显示值。以下是部分代码：

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

并整理：

  ...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;
  console.log(dish["name"]); console.log(dish.image); console.log(dish.category);
  console.log(dish.label); console.log(dish.price); console.log(dish.description);
  console.log("----------------------------------------------------------");
  console.log(dish.comments[0]["rating"]); console.log(dish.comments[0]["comment"]);
  console.log(dish.comments[0]["author"]); console.log(dish.comments[0]["date"]);
});

console.log("嘿嘿嘿！");//这在控制台中完美显示 console.log(dish.name);//但这显示... ReferenceError: disc is not defined

在视图上它也不起作用...没有显示，只是空白。

      ....<img class="media-object img-thumbnail"
      ng-src={{image}} alt="Uthappizza">
    </a>
  </div>
  <div class="media-body">
    <h2 class="media-heading">{{dish.name}}
     <span class="label label-danger">{{dish.label}}</span>....

ngApp 在 html 标签中：

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

而ngController被放置在一个包含整个视图的div中：

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

那么……怎么了？

【问题讨论】：

标签： angularjs view ng-controller ng-app

【解决方案1】：

您正在使用 Controller 作为。

只需转换您的

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

到

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

并通过ctrl访问值

喜欢这个

{{ctrl.dish.name}}

【讨论】：

好的，就是这样。

【解决方案2】：

像这样在html中使用控制器

<div ng-app="confusionApp" ng-controller="dishDetailController as vm">
<img class="media-object img-thumbnail"
      ng-src={{vm.image}} alt="Uthappizza">  
  <div class="media-body">
    <h2 class="media-heading">{{vm.dish.name}}
     <span class="label label-danger">{{vm.dish.label}}</span>
</div>

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:2,
        comment:"It's your birthday, we're gonna party!",
        author:"25 Cent",
        date:"2011-12-02T17:57:28.556094Z"
      }

    ]
  };

  this.dish = dish;
  console.log(dish["name"]); console.log(dish.image); console.log(dish.category);
  console.log(dish.label); console.log(dish.price); console.log(dish.description);
  console.log("----------------------------------------------------------");
  console.log(dish.comments[0]["rating"]); console.log(dish.comments[0]["comment"]);
  console.log(dish.comments[0]["author"]); console.log(dish.comments[0]["date"]);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="confusionApp" ng-controller="dishDetailController as vm">
<img class="media-object img-thumbnail"
      ng-src={{vm.image}} alt="Uthappizza">  
  <div class="media-body">
    <h2 class="media-heading">{{vm.dish.name}}
     <span class="label label-danger">{{vm.dish.label}}</span>
</div>

【讨论】：

没有问题，如果这个答案解决了问题，请确保标记为答案。欢呼：D
哈哈！这是你吗？ :P 好兄弟！继续前进:)