Angular JS中的錯誤在瀏覽器中顯示預覽爲{{dish.comment}}？

我想在角度上做一個任務。它工作正常，然後突然在括號內預覽，我看到{{dish.comment}}。我是一個新手。一切都似乎是在文件though.Below罰款是HTML文件Angular JS中的錯誤在瀏覽器中顯示預覽爲{{dish.comment}}？

<div class="row row-content" ng-controller="DishDetailController"> 
     <div class="col-xs-12"> 
      <div class="tab-content"> 


      <li 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 ng-show="showDetails">{{dish.description}}</p> 
        </div> 

        </li> 
        </div> 
        </div> 
        </div>

下面是App.js文件

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; 

    }])

，我已經包括NG-應用=「confusionApp」在HTM標籤和也包括腳本/ app.js在底部

來源

2016-09-15 KRISHNA

只是一個建議：使用你的瀏覽器控制檯...（上' F12'鍵...） – MarcoS

你可以提供plunker，或者至少是控制檯日誌嗎？ – Mikki

app.js：162未捕獲的ReferenceError：賦值中無效的左側 - 在控制檯上。 @MarcoS – KRISHNA

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; 
 

 
    }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="row row-content" ng-app="confusionApp" ng-controller="DishDetailController"> 
 
     <div class="col-xs-12"> 
 
      <div class="tab-content"> 
 
      <li 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> 
 
        <span>{{dish.comments[0].comment}}</span> 
 
        <p ng-show="showDetails">{{dish.description}}</p> 
 
        </div> 
 

 
        </li> 
 
        
 
        </div> 
 
        </div> 
 
        <!--<div ng-repeat="comment in dish.comments"> 
 
        <p> 
 
         {{comment.comment}} 
 
        </p> 
 
        </div> --> 
 
        </div>

看評論的對象的數組，所以你需要遍歷或者您可以通過使用{{dish.comments[0].comment}}

得到具體的值，我希望這本書能解決你的問題

來源

2016-09-15 08:00:38 Kumar

Angular JS中的錯誤在瀏覽器中顯示預覽爲{{dish.comment}}？

回答

相關問題