2017-04-02 17 views
1

我正嘗試使用ng-repeat從blockquote中的dishDetailController打印一組註釋。我試過了,但我不知道該怎麼做。任何幫助將不勝感激,謝謝。這是代碼。在html頁面上插入控制器數據

  <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"> 
        <div class="col-xs-12" ng-controller="dishDetailController as dish"> 
         <ul class="media-list"> 
          <li class="media"> 
           <div class="media-left media-middle"> 
            <a href="#"> 
             <img class="media-object img-thumbnail" 
              ng-src="{{dish.image}}" alt="Uthapizza"> 
            </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> 
          </li> 
         </ul> 
        </div> 
        <div class="col-xs-9 col-xs-offset-1"> 
         <h3>Customer Comments</h3> 
         <blockquote> 
          <!--In this blockquote. --> 
         </blockquote> 
        </div> 
       </div> 

      </div> 

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

       var app = angular.module('confusionApp', []); 

       app.controller('dishDetailController', 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; 

       }); 

      </script> 

      </body> 

      </html> 

回答

1

var app = angular.module('confusionApp', []); 
 

 
app.controller('dishDetailController', 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; 
 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container" ng-app='confusionApp'> 
 
    <div class="row row-content" ng-controller="dishDetailController as dish"> 
 
    <div class="col-xs-12" > 
 
     <ul class="media-list"> 
 
     <li class="media"> 
 
      <div class="media-left media-middle"> 
 
      <a href="#"> 
 
       <img class="media-object img-thumbnail" ng-src="dish.image" alt="Uthapizza"> 
 
      </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> 
 
     </li> 
 
     </ul> 
 
    
 
</div> 
 
    <div class="col-xs-9 col-xs-offset-1"> 
 
     <h3>Customer Comments</h3> 
 
     
 
     <blockquote ng-repeat="com in dish.comments"> 
 
     <!--In this blockquote. --> 
 
     {{ com.comment }} 
 
     {{ com.rating }} 
 
     {{ com.author }} 
 
     </blockquote> 
 
    </div> 
 
    </div> 
 

 
    </div>

你所面臨的問題是,該控制器是不是在塊引用片段有效。

ng-controller="dishDetailController as dish"的div在此特定div之前被關閉。 爲了克服這個問題,你可以將段移動到上面的div。

<div class="row row-content" ng-controller="dishDetailController as dish"> 
. 
. 
. 
    <blockquote ng-repeat="com in dish.comments"> 
    <!--In this blockquote. --> 
    {{ com.comment }} 
    {{ com.rating }} 
    {{ com.author }} 
    </blockquote> 
</div> 

這裏是工作的代碼筆: http://codepen.io/BoyWithSilverWings/pen/bqzaaK

+0

感謝了很多人! –

1

試試這個

<blockquote ng-repeat="item in dish.comments"> 
     {{item.comment}} - {{item.author}}     
</blockquote> 
0

首先,你應該分配您的ng-appng-controller於將包裝你的塊引用的項目,因爲它不會從當前的設置工作父容器,並從您的標記中,我也看不到任何ng-app

見下文:

var app = angular.module("confusionApp", []); 
 
app.controller("dishDetailController", 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; 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container" ng-controller="dishDetailController" ng-app="confusionApp"> 
 
       <div class="row row-content"> 
 
        <div class="col-xs-12"> 
 
         <ul class="media-list"> 
 
          <li class="media"> 
 
           <div class="media-left media-middle"> 
 
            <a href="#"> 
 
             <img class="media-object img-thumbnail" 
 
              ng-src="{{dish.image}}" alt="Uthapizza"> 
 
            </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> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
        <div class="col-xs-9 col-xs-offset-1"> 
 
         <h3>Customer Comments</h3> 
 
         <blockquote ng-repeat="item in dish.comments"> 
 
          {{item}} 
 
         </blockquote> 
 
        </div> 
 
       </div> 
 

 
      </div>

0

首先,你需要ng-app指令添加到您的HTML代碼。例如: <body ng-app="confusionApp">。您需要將ng-controller="dishDetailController as dish"更改爲ng-controller="dishDetailController"

您可以閱讀更多關於ng-controller指令(以及何時必須使用ashere

要打印設置一組的意見,你會用ng-repeat