AngularJS ng-repeat不呈现

时间:2016-01-16 08:57:17

标签: javascript angularjs

我现在正在练习AngularJS。

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

的index.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>


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

有人可以告诉我故障在哪里吗?

1 个答案:

答案 0 :(得分:3)

您提供了额外的}

这里

    {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