AngularJS - Les valeurs des objets n'apparaissent pas dans {{}}

-2

Je dois montrer certaines valeurs d'un JSON dans le {{}} mais je vois que les valeurs sont affichées dans la console et dans app.controller. C'est juste de quitter cet app.controller et les valeurs ne sont pas affichées. Ce sont là quelques parties du code:AngularJS - Les valeurs des objets n'apparaissent pas dans {{}}

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

et finition:

...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!"); // Ceci montre parfaitement dans la console console.log (dish.name); // mais cela montre ... ReferenceError: dish n'est pas défini

Et sur la vue ça ne marche pas trop ... Pas affiché, juste vide.

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

Le ngApp est dans la balise html:

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

Et ngController est placé dans une div qui détient toute la vue:

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

Alors ... qu'est-ce qui ne va pas?

Source

2017-02-26 samu101108

contrôleur utilisé comme dans le code HTML comme t son

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

Source

2017-02-26 09:34:33

Ça marche maintenant !!! – samu101108

pas de prob, si cette réponse résout le prob assurez-vous de marquer comme réponse. à la vôtre: D –

ha ha! Est-ce toi? : P grand frère! continue :) – Sajeetharan

Vous utilisez Controller as.

Juste convertir vos

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

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

et la valeur via l'accès ctrl

comme celui-ci

{{ctrl.dish.name}}

Source

2017-02-26 09:31:37

Ok, c'est-il. – samu101108

AngularJS - Les valeurs des objets n'apparaissent pas dans {{}}

Répondre

Questions connexes