2016-06-04 6 views
0

Ich kenne seine sehr grundlegende dumme Frage. Aber ich habe gerade angefangen, sp weiß nicht weiter. Ich versuche Array-Speicher anzuzeigen ist ein Objekt. Objekt ist im Controller. Aber ich kann es nicht drucken. Bitte lassen Sie mich wissen, wo ich mich irre.wie geschachteltes Array in angular js gedruckt werden

Hier mein Code

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

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
 
     content must come *after* these tags --> 
 
    <title>Ristorante Con Fusion: Menu</title> 
 
     <!-- Bootstrap --> 
 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
 
    <link href="styles/mystyles.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
     <div class="row row-content" ng-controller="dishDetailController as dishCtrl"> 
 
      <div class="col-xs-12"> 
 
       <p>Put the dish details here</p> 
 
       
 
       <div class="media" > 
 
        
 
       <div class="media-left media-middle"> 
 
        <a href="#"> 
 
        <img class="media-object img-thumbnail" ng-src={{dishCtrl.dish.image}}> 
 
        </a> 
 
        
 
        </div> 
 
        <div class="media-body"> 
 
       
 
         <h2 class="media-heading">{{dishCtrl.dish.name}}S 
 
         <span class="label label-danger">{{dishCtrl.dish.label}}</span> 
 
         <span class="badge">{{dishCtrl.dish.price | currency}}</span> 
 
         </h2> 
 
         <p>{{dishCtrl.dish.description}}</p> 
 
         
 
         </div> 
 
        
 
       
 
       
 
      
 
     </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-9 col-xs-offset-1"> 
 
       <blockquote ng-repeat="commenta in dishCtrl.dish.comments"> 
 
         <p>{{commenta.rating}}</p> 
 
         </blockquote> 
 
       
 
      </div> 
 
     
 
    </div> 
 
    
 

 
    <script src="../bower_components/angular/angular.min.js"></script> 
 
    <script> 
 

 
     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:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
 
            author:"Paul McVites", 
 
            date:"2014-09-05T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:3, 
 
            comment:"Eat it, just eat it!", 
 
            author:"Michael Jaikishan", 
 
            date:"2015-02-13T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:4, 
 
            comment:"Ultimate, Reaching for the stars!", 
 
            author:"Ringo Starry", 
 
            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; 
 
      
 
     }); 
 

 
    </script> 
 

 
</body> 
 

 
</html>

+0

Ein Code ohne ** klare Problemstellung ** ist Wegthema auf SO. –

Antwort

0

Dies liegt daran, dass Sie den Code außerhalb der Steuerung div erklärt. Es muss so sein:

<div class="container"> 
<div class="row row-content" ng-controller="dishDetailController as dishCtrl"> 
    <div class="col-xs-12"> 
    <p>Put the dish details here</p> 

    <div class="media"> 

     <div class="media-left media-middle"> 
     <a href="#"> 
      <img class="media-object img-thumbnail" ng-src={{dishCtrl.dish.image}}> 
     </a> 

     </div> 
     <div class="media-body"> 

     <h2 class="media-heading">{{dishCtrl.dish.name}}S 
        <span class="label label-danger">{{dishCtrl.dish.label}}</span> 
        <span class="badge">{{dishCtrl.dish.price | currency}}</span> 
        </h2> 
     <p>{{dishCtrl.dish.description}}</p> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-9 col-xs-offset-1"> 
    <blockquote ng-repeat="commenta in dishCtrl.dish.comments"> 
    <p>{{commenta.rating}}</p> 
    </blockquote> 

</div> 
</div> 

Hier ist die updated code

Hoffe, es hilft :)

+0

Ohh..silly ich: p danke .. –

+0

yeah. Immer :) – Thinker