2016-01-06 63 views
0

爲什麼我沒有得到dish.price,dish,description等的值,我在這裏做錯了什麼?角度表達未得到評估

<!DOCTYPE html> 
 
<html lang="en" ng-app> 
 

 
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384- 
 

 
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    
 
</head> 
 

 

 
<body> 
 

 
<div class="container"> 
 

 
     <div class="row row-content" 
 

 
     ng-init="   
 

 
        dish= { 
 
          name:'Uthapizza', 
 
          image: 'D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\Image\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:'' 
 
          }"> 
 

 
      <div class="col-xs-12"> 
 
       <div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src={{dish.image}} alt="Bread"> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h2 class="media-heading">{{dish.name}} 
 
    <span class="label label-danger label-xs">{{dish.label}}</span> 
 
<span class="badge">{{dish.price | currency}}</span> 
 
    
 
    </h2> 
 
     <p>{{dish.description}}</p> 
 
    
 
    </div> 
 
    </div> 
 
       
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 

 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
     <!--<script src"./bootstrap-3.3.6-dist/js/bootstrap-3.3.6-dis/angular2.min.js"></script>--> 
 
      <!--<script src="D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\jsangular2.min.js"></script>--> 
 

 

 
</body> 
 
</html>

+0

您是否需要處於Angular組件(例如控制器)的範圍內才能執行此操作?我不確定ng-init屬性如何管理換行符。 – Eria

+0

嗨Eria,不,請不要在模型視圖方面認爲它,我使用簡單的角度JS衍生物,並試圖評估表達式,以反映我的HTML頁面中的值。 –

回答

0

做了一些變化和所使用的控制器現在一切都很正常:)

的問題是,我想ATLEAST不知道,但你那是你的圖片路徑使用\爲什麼我這樣做\/那麼這不是問題。


DEMO

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.dish = { 
 
    name: 'Uthapizza', 
 
    image: 'D:\/Ericoll\/bootstrap-3.3.6-dist\/bootstrap-3.3.6-dist\/Image\/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: '' 
 
    }; 
 
});
<!DOCTYPE html> 
 
<html ng-app="App"> 
 

 
<head> 
 
    <title>Ristorante Con Fusion: Menu</title> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div class="container"> 
 
    <div class="row row-content"> 
 
     <div class="col-xs-12"> 
 
     <div class="media"> 
 
      <div class="media-left"> 
 
      <a href="#"> 
 
       <img class="media-object" src={{dish.image}} alt="Bread"> 
 
      </a> 
 
      </div> 
 
      <div class="media-body"> 
 
      <h2 class="media-heading">{{dish.name}} 
 
    <span class="label label-danger label-xs">{{dish.label}}</span> 
 
<span class="badge">{{dish.price | currency}}</span> 
 
    </h2> 
 
      <p>{{dish.description}}</p> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

Thnx很重要,可以提前完成並將模型控制器應用於我的項目。 :) –

0

的dish.image的價值問題 - 避免使用反斜線或逃避它

+0

是的,你有這個權利,但它的一種奇怪,我不知道爲什麼它有反斜槓等問題。 –

+0

可能它與JavaScript中使用反斜槓以逃避特殊字符的事實 – Nora

0

我執行你的代碼。問題在於圖像部分,如果你從ng-init中刪除圖像,你的代碼將會正常工作。爲圖像路徑避免反彈。

+0

是啊\是問題,但如果我使用\ /那麼它工作正常..不知道爲什麼是這樣的.. –