Question

由于我是Angular的新手，我希望能够遇到问题，但这个问题似乎正在重复进行。

在我学习Angular here的教程之后，我正在学习如何使用表达式。

我尝试做的是访问gem的属性并在网页上显示。但是，没有访问对象值，它只是显示如下：

$ {{store.product.price}}

添加到购物车

我希望它显示为：

Dodecahaderon

$ 2.95

。。

添加到购物车

我认为这可能是由于使用Angular1.2的视频而我使用的是1.4但是我不确定。我做错了什么以及如何正确显示对象属性？

以下是代码：

＆＃13;

(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
};
})();

＆＃13;

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

＆＃13;

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>之间的角度参考替换为<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></sc‌ript>

网页使用Angular1.4从表达式中显示花括号

2 个答案: