網頁正在使用Angular1.4從表達式中顯示花括號

Question

由於我是Angular的新手，所以我希望能遇到一些問題，但是這個問題似乎總是反復出現。

正如我在下面的學習角的教程在這里，我正在學習如何使用表達式。

我試圖做的是訪問gem的屬性並將其顯示在網頁上。 但是，沒有訪問對象值，它只是這樣顯示：

{{store.product.name}}

$ {{store.product.price}}

{{store.product.description}}

添加到購物車

我希望它顯示為：

十二烷

$ 2.95

。。。

添加到購物車

我以為可能是由於使用Angular1.2的視頻，而我使用的是1.4，但我不確定。 我在做什么錯，如何正確顯示對象屬性？

這是代碼：

 (function () { var app = angular.module('store', []); app.controller('StoreController', function(){ this.product = gem; }); var gem = { name: 'Dodecahaderon', price: 2.95, description: '. . . ', canPurchase = true, soldOut = true }; })();

 <!DOCTYPE html> <html ng-app="store"> <head> <link rel="stylesheet" type="text/css" href="bootstrap.min.css" /> </head> <body ng-controller="StoreController as store"> <div ng-hide="store.product.soldOut"> <h1>{{store.product.name}}</h1> <h2>${{store.product.price}}</h2> <p>{{store.product.description}}</p> <button ng-show="store.product.canPurchase">Add to Cart</button> </div> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>

Answer 1

您的角度庫未正確引用。 打開控制台窗口，並確保角度腳本引用確實有效。

Answer 2

目前， gem已在控制器范圍之外定義。 此外，作為寶石作為對象，您必須將=更改為:

您需要將代碼更改為此並且它可以工作

(function () {
  var app = angular.module('store', []);

app.controller('StoreController', function(){

  this.item = {
    name: 'Dodecahaderon',
    price: 2.95,
    description: '. . . ',
    canPurchase : true,
    soldOut : true
  };


});

})();

和你的HTML到：

<!DOCTYPE html>
    <html ng-app="store">
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut">
      <h1>{{store.item.name}}</h1>
      <h2>${{store.item.price}}</h2>
      <p>{{store.item.description}}</p>
      <button ng-show="store.item.canPurchase">Add to Cart</button>
    </div>


  </body>
</html>

另外，您可能需要<script type="text/javascript" src="angular.min.js"></script> angular的引用從<script type="text/javascript" src="angular.min.js"></script>為<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></sc‌ript>

網頁正在使用Angular1.4從表達式中顯示花括號

問題描述

2 個解決方案

解決方案1
2 2015-12-19 19:23:16

解決方案2
1 已采納 2015-12-19 19:30:07

網頁正在使用Angular1.4從表達式中顯示花括號

問題描述

2 個解決方案

解決方案1 2 2015-12-19 19:23:16

解決方案2 1 已采納 2015-12-19 19:30:07

解決方案1
2 2015-12-19 19:23:16

解決方案2
1 已采納 2015-12-19 19:30:07