Question

所以目前我正在学习使用angular.js＆＃39;这样的课程，到目前为止我非常喜欢它，但我只是在1.5＆＃39;内置指令＆＃39;。但我无法理解他们在课程中使用的重复内容。

所以你需要做的就是在div上加上ng-repeat，它应该遍历数组中的所有项目并显示它们。 Maby我输错了一些东西，但是我把这个东西重写了两次并且读了100次...... :(

这是我目前的html模板

<html lang="en" ng-app="store">
<body ng-controller="storeController as store">
    <div ng-hide="store.product.soldOut" 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>

这是我的app.js文件。

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

        app.controller('storeController', function () {
        this.products = gems;
     });

    var gems = [
        {
            name: 'Dodecahedron',
            price: 295,
            description: 'Nice gem',
            canPurchase: true,
            soldOut: false
        },
        {
            name: "Pentagonal Gem",
            price: 5.95,
            description: "more nice gems",
            canPurchase: true,
            soldOut: false
        }
    ]
})();

我似乎无法找出它为什么不重复自己。而且我甚至不知道为什么在课程中他们会说“商店里的产品”产品＆＃39;没有＆＃39;产品＆＃39;随处叫。

我也把它放在一个codepen中 http://codepen.io/denniswegereef/pen/JYwora

Answer 1

删除＆＃34;商店＆＃34;来自您的内联绑定。使用ng-repeat时，您可以从in子句引用数据对象，如下所示：

<div ng-hide="product.soldOut" 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>

Answer 2

你的代码很乱。这是正确的版本

＆＃13;

var app = angular.module('store', []);

app.controller('storeController', function ($scope) {
  $scope.products = [
        {
            name: 'Dodecahedron',
            price: 295,
            description: 'Nice gem',
            canPurchase: true,
            soldOut: false
        },
        {
            name: "Pentagonal Gem",
            price: 5.95,
            description: "more nice gems",
            canPurchase: true,
            soldOut: false
        }
    ];
});

＆＃13;

<html lang="en" ng-app="store">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body ng-controller="storeController">
    <div ng-repeat="product in products">
      <div ng-hide="product.soldOut">
        <h1>{{product.name}}</h1>

        <h2>${{product.price}}</h2>

        <p>{{product.description}}</p>

        <button ng-show="product.canPurchase"> Add to cart </button>
      </div>
    </div>
</body>
</html>

＆＃13;

我的ng-repeat如何在这个小代码上不起作用

2 个答案: