AngularJS - 對象值不在{{}}中顯示

-2

我必須在{{}}中顯示來自Json的某些值，但是我看到這些值僅顯示在控制檯中並位於app.controller內。它剛剛離開這個app.controller並且值不顯示。這些代碼的某些部分：AngularJS - 對象值不在{{}}中顯示

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：盤未定義

而在視圖上它不工作太...不顯示，只是空白。

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

所以......有什麼不對？

來源

2017-02-26 samu101108

使用控制器像T中的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>

來源

2017-02-26 09:34:33

現在正在工作！ – samu101108

沒有概率，如果這個答案解決概率一定要標記爲答案。歡呼聲：D –

哈哈！這是你嗎？：P偉大的兄弟！繼續：） – Sajeetharan

您正在使用Controller。

只需通過ctrl

轉換您

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

到

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

和訪問值這樣

{{ctrl.dish.name}}

來源

2017-02-26 09:31:37

好吧，這是它。 – samu101108

AngularJS - 對象值不在{{}}中顯示

回答

相關問題