Lesen nichts von der Steuerung in AngularJs

Ich habe diese Aufgabe erhalten. Grundsätzlich gibt es einen Controller namens DishDetailedController mit einem Objekt namens dish. Und es gibt auch einen verschachtelten Controller namens DishCommentContoller, wo der Benutzer einen Kommentar über ein Formular sendet. Die erste Aufgabe besteht also darin, alle Objekte der DishDetailedController auszulesen und im Browser anzuzeigen. Ich werde die Kommentare Array-Objekte in einem anderen Div zu einem späteren Zeitpunkt anzeigen. Ich habe etwas Ähnliches gemacht, bevor es funktionierte, aber ich weiß nicht, was jetzt passiert.Lesen nichts von der Steuerung in AngularJs

https://jsfiddle.net/m8nwnc8a/4/

Bootstrap-Code

<div class="row row-content"> 
     <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>

AngularJS-Code

'use strict'; 

angular.module('confusionApp', []) 


    .controller('DishDetailController', ['$scope', function($scope) { 

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

         ] 
       }; 

     $scope.dish = dish; 

    }]) 

    .controller('DishCommentController', ['$scope', function($scope) { 

     //Step 1: Create a JavaScript object to hold the comment from the form 

     $scope.submitComment = function() { 

      //Step 2: This is how you record the date 
      "The date property of your JavaScript object holding the comment" = new Date().toISOString(); 

      // Step 3: Push your comment into the dish's comment array 
      $scope.dish.comments.push("Your JavaScript Object holding the comment"); 

      //Step 4: reset your form to pristine 

      //Step 5: reset your JavaScript object that holds your comment 
     } 
    }]);

Irgendwelche Ideen?

Quelle

2017-02-23 Theo

Sie haben in jsFiddle nicht enthalten jQuery-Datei. Ist das auch im Code der Fall? –

Whaaaa ?? '" Die Eigenschaft date Ihres JavaScript-Objekts mit dem Kommentar "= new Date(). ToISOString();' –

@Alon Eitan. Lieber Gott, ich habe das nicht kommentiert ... Danke. – Theo

Sie haben eine Menge Dinge schließen vergessen, von ng-app. ng-controller zu Skriptdateien.

sollte diese Arbeit: https://jsfiddle.net/m8nwnc8a/28/

Quelle

2017-02-23 17:18:35 eminlala

Froh, zu helfen :) – eminlala

Sie initiieren Ihre eckige App nicht. Sie verpassen die Abschnitte ng-app und ng-controller. Außerdem werden einige HTML-Tags nicht ordnungsgemäß geschlossen.

Ich habe sie behoben.

Working demo here

Code:

<body ng-app="confusionApp"> 
    <h1>Hello, world!</h1> 
    <div ng-controller="DishDetailController"> 

     <div class="row row-content" ng-controller="DishDetailController"> 
      <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 }}</h2> 
         <span class="label label-danger">{{dish.label}}</span> 
         <span class="badge">{{dish.price | currency}}</span> 
         <p>{{dish.description}}</p> 
        </div> 
       </div> 
      </div> 
     </div> 



    </div> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

Quelle

2017-02-23 17:14:53

Lesen nichts von der Steuerung in AngularJs

Antwort

Verwandte Themen