为什么ng-repeat矫正不起作用？

Fedor Patutinskiy 发表于 Dev

费多·帕图金斯基（Fedor Patutinskiy）

我正在学习angular的基础知识，我不能理解，为什么ng-repeat不起作用。

档案app.js

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

app.controller('StoreController', function(){
this.product=gems;

});

var gems = [
    {
        name: "Dodecahedron",
        price: 2.95,
        description: '...',
        canPurchase: true,
    },  
    {
        name: "Pentagonal Gem",
        price: 5.95,
        description: '...',
        canPurchase: false,
    }
];
})();

index.html

<!DOCTYPE html> 
<html ng-app="store">
    <head>
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body ng-controller="StoreController as store">
        <div ng-repeat="product in store.products">
            <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>
    </body>
</html>

还要补充一点，如果我尝试不以任何方式查看它（例如store.product [0] .description），它会正常工作。

Oleksandr T.

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


  app.controller('StoreController', function ($scope) {
     $scope.products = [{
          name: "Dodecahedron",
          price: 2.95,
          description: '...',
          canPurchase: true,
       }, {
          name: "Pentagonal Gem",
          price: 5.95,
          description: '...',
          canPurchase: false,
      }];
  });

})();

<body ng-controller="StoreController as store">
    <h1>APP</h1>

    <div ng-repeat="product in products">
        <h1>{{product.name}}</h1>
        <h2> ${{product.price}}</h2>
        <p>{{product.description}}</p>

        <button ng-show="product.canPurchase"> Add to Cart </button>
    </div>
</body>