AngularJS - Objektwerte werden in {{}} nicht angezeigt

-2

Ich muss einige Werte von einem Json in {{}} anzeigen, aber ich sehe, dass die Werte nur in der Konsole und direkt in app.controller angezeigt werden. Es geht nur von diesem app.controller und die Werte werden nicht angezeigt. Diese sind einige Teile des Codes:AngularJS - Objektwerte werden in {{}} nicht angezeigt

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

und Schlichten:

...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 ("Hey hey hey!"); // Diese gezeigt perfekt in Konsole console.log (dish.name); // aber das zeigt ... ReferenceError: dish ist nicht definiert

Und auf der Ansicht funktioniert es auch nicht ... Not wird angezeigt, nur leer.

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

Die ngApp ist in HTML-Tag:

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

Und ngController in einem div platziert, die die gesamte Ansicht hält:

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

Also ... was ist los?

Quelle

2017-02-26 samu101108

Verwendung Controller wie im html wie t

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

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

und Zugriffswert umwandeln seine

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

Quelle

2017-02-26 09:34:33

Das funktioniert jetzt !!! – samu101108

kein Problem, wenn diese Antwort das Problem lösen, stellen Sie sicher, als Antwort zu markieren. Prost: D –

ha ha! bist du das? : P großer Bruder! mach weiter :) – Sajeetharan

Sie verwenden Controller als.

einfach Ihre über ctrl

wie diese

{{ctrl.dish.name}}

Quelle

2017-02-26 09:31:37

Ok, das ist es. – samu101108

AngularJS - Objektwerte werden in {{}} nicht angezeigt

Antwort

Verwandte Themen