AngularJS ng-repeat不会渲染

AngularJS ng-repeat does not render

本文关键字：ng-repeat AngularJS      更新时间：2023-09-26

我现在正在练习AngularJS。

我的问题是：ng-repeat不重复我的数组。

索引.html： 

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


应用.js：

(function(){
    var app = angular.module('store', []);
    var gems = [{name: 'Dodecahedron',
         price: 2.95,
         description: 'Hidden mass',
         canPurchase : true,
         soldOut : true},
        {name: 'Pentagonal gem',
         price: 5.95,
         description: 'Vacuum mass',
         canPurchase : false,
         soldOut : false}
           }];
    app.controller('StoreController', function(){
    this.products = gems;
    });
})();

谁能告诉我故障在哪里？

您提供了额外的}

这里 

    {name: 'Pentagonal gem',
     price: 5.95,
     description: 'Vacuum mass',
     canPurchase : false,
     soldOut : false} <- here
       }];

删除它

{
  name: 'Pentagonal gem',
  price: 5.95,
  description: 'Vacuum mass',
  canPurchase: false,
  soldOut: false
}];

DEMO

相关文章：