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

그리고 마무리 : // 이것은 (콘솔 CONSOLE.LOG에 완벽하게 표시

...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 ("! 이봐 이봐 이봐") 다음은 몇 가지 코드의 부분입니다 dish.name); // 그러나 이것은 표시 중입니다. ReferenceError : 접시가 정의되지 않았습니다.

보기에서보기가 작동하지 않습니다 ... 표시되지 않습니다. 단지 비어 있습니다.

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

그리고 ngController 전체보기 보유하고 사업부에 배치됩니다 :

 ....<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 태그에 무슨 잘못 ...

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

을 그래서?

출처

2017-02-26 samu101108

사용 컨트롤러처럼 ctrl

를 통해

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

에

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

및 액세스 값을 변환 그의

<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

prob가없는 경우이 답이 prob를 해결하면 답으로 표시하십시오. 환호 : D –

하하! 이거 너야? : P 좋은 형제! 계속 가지 :) – Sajeetharan

컨트롤러를으로 사용 중입니다.

그냥 t 같은 HTML에서로이

{{ctrl.dish.name}}

출처

2017-02-26 09:31:37

좋아, 그건 그것입니다. – samu101108

AngularJS - 객체 값이 {{}}에 표시되지 않습니다.

답변

관련 문제