Question

我正在从代码学校学习角度js，这是他们的代码。它不会显示我的产品，而是显示与{{..}}完全相同的代码。我已经彻底检查了错误似乎没有任何效果。我已经尝试删除 StoreController的别名作为商店并仅使用 StoreController ，这也不起作用。我将我的整个js代码包含在一个函数中，但它也没有用。我也附上了我的结果图片。

我在Ang.js文件中的Javascript代码

<!DOCTYPE html>
<html ng-app="GemsStore">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<body ng-controller="StoreController as store">

<div ng-repeat="product in store.products">
    <div ng-hide="store.product.soldOut">
        <h1>{{store.product.name}}</h1>
        <h2>{{store.product.price}}</h2>
        <p>{{store.product.description}}</p>
        <button class="btn-default" ng-show="store.product.canPurchase">Add To Cart</button>
    </div>
</div>

<script src="js/ang.js"></script>o
<script src="angular.min.js"></script>

</body>
</html>

我的HTML代码

{{1}}

My result

edited code

Answer 1

JS代码

app.controller('StoreController', function() {    
  var gems = [{
      name: 'Diamond',
      price: 100,
      description: 'Shiny',
      canPurchase: true,
      soldOut: false
    },    
    {
      name: 'Sapphire',
      price: 200,
      description: 'Shiny',
      canPurchase: true,
      soldOut: false
    }
  ];    
  this.products = gems;
});

您的HTML代码

<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
    <div ng-hide="product.soldOut">
        <h1>{{product.name}}</h1>
        <h2>{{product.price}}</h2>
        <p>{{product.description}}</p>
        <button class="btn-default" ng-show="product.canPurchase">Add To Cart</button>
    </div>
</div>
<script src="angular.min.js"></script>
<script src="js/ang.js"></script>
</body>

我的角度表达式不是由浏览器呈现的

1 个答案: