AngularJS zeigt keine Daten

Ich bin ein absoluter Anfänger in Frameworks, besonders eckig. Bitte geben Sie mir einen Hinweis, warum der Wert in Klammern nicht in der Ansicht angezeigt wird. Ich suche konstruktive Kritik für AngularJS und Javascript, NICHT für meine Fähigkeiten als Informatiker. Dies ist ein Teil 1 von Coursera "Full Stack Web Development" -Kurs. Hier ist der Code:AngularJS zeigt keine Daten

  <html lang="en" ng-app="confusionApp"> 
      <body> 
       <div class="container"> 
        <div class="row row-content" ng-controller="dishDetailController as dishCtrl"> 
         <div class="col-xs-12"> 
          <div class="media"> 
           <div class="media-left media-middle"> 
            <a href="#"> 
             <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthappizza"> 
            </a> 
           </div> 
           <div class="media-body"> 
            <h2 class="media-heading">{{dish.name}} 
            <span class="label label-danger">{{dish.label}}</span> 
            <span class="badge">{{dish.price | currency}}</span> 
            </h2> 
            <p>{{dish.description}}</p> 
           </div> 
          </div> 
         </div> 
         <div class="col-xs-9 col-xs-offset-1"> 
          <p>Put the comments here</p> 
         </div> 
        </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.',       
        }; 

        this.dish = dish; 

       }); 
       </script> 
      </body> 
      </html>

Quelle

2016-04-08 Taras Yaremkiv

Sie können 'this.dish =' in '$ scope.dish =' ändern oder '{{dishCtrl.dish.foo}}' verwenden. – alper

Ich glaube nicht, dass die Autoren des Kurses wollten, dass ich einen Scope benutze, weil es in der nächsten Woche ist. Die zweite, die ich denke –

bei Verwendung Controller-wie so sollten Sie dishCtrl bevor Sie Ihre Daten hinzufügen. wie diese

{{dishCtrl.dish.name}}

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.',       
 
        }; 
 

 
        this.dish = dish; 
 

 
       });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
       <div ng-app="confusionApp" class="container"> 
 
        <div class="row row-content" ng-controller="dishDetailController as dishCtrl"> 
 
         <div class="col-xs-12"> 
 
          <div class="media"> 
 
           <div class="media-left media-middle"> 
 
            <a href="#"> 
 
             <img class="media-object img-thumbnail" ng-src={{dishCtrl.dish.image}} alt="Uthappizza"> 
 
            </a> 
 
           </div> 
 
           <div class="media-body"> 
 
            <h2 class="media-heading">{{dishCtrl.dish.name}} 
 
            <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"> 
 
          <p>Put the comments here</p> 
 
         </div> 
 
        </div> 
 
       </div>

Quelle

2016-04-08 12:00:00

danke für Hilfe, ich missverstanden immer noch viel Dinge eckigen Grundlagen –

es ist besser conroller-verwenden als Sie in Ihrem Projekt verwenden. –

Versuchen avoiding scope soup von this.dish = dish-$scope.dish = dish in Ihrem Controller zu ändern.

Eine bessere Lösung ist, den Controller zu verwenden, in Ihrem Fall dishCtrl, wie folgt {{dishCtrl.dish.description}}.

Quelle

2016-04-08 12:09:07 Kasper

AngularJS zeigt keine Daten

Antwort

Verwandte Themen