我正在学习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),它将正常运行。

最佳答案

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


http://jsbin.com/dejita/1/

关于javascript - 为什么ng-repeat指令不起作用?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26815966/

10-11 13:00