2017-02-23 5 views
1

私はこの仕事を与えられました。基本的には、dishというオブジェクトを持つDishDetailedControllerというコントローラがあります。また、DishCommentContollerという名前のネストされたコントローラがあり、ユーザーがフォームを通じてコメントを送信します。したがって、最初の作業はDishDetailedControllerのすべてのオブジェクトを読み取ってブラウザに表示することです。私はコメント配列オブジェクトを後の段階で別のdivに表示します。私は前に何か似たようなことをしていましたが、今は何が起こっているのか分かりません。AngularJsのコントローラから何も読まない

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

ブートストラップコード

<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コード

'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 
     } 
    }]); 

任意のアイデア?

+0

あなたはjsFiddleでjQueryのファイルが含まれていません。これは実際のコードでも同様ですか? –

+1

ワアアア? ''コメントを保持するJavaScriptオブジェクトのdateプロパティ "= new Date()。toISOString();' –

+0

@Alon Eitan。親愛なる神、私はそれをコメントしなかった...ありがとう。 – Theo

答えて

3

あなたはng-appから、多くのものを含めるのを忘れています。スクリプトファイルにはng-controllerが必要です。

これは動作するはずです: https://jsfiddle.net/m8nwnc8a/28/

+0

よろしくお願いします:) – eminlala

0

角度アプリを起動していません。 ng-appセクションとng-controllerセクションがありません。 また、一部のHTMLタグが正しく閉じられていません。

私はそれらを修正しました。

Working demo here

コード:

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

関連する問題