Question

今天是Angular.js的第一天，我坚持使用基本的控制器：

我的APP.js

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

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

     var gem = [
          {name:'John', price:25, description:'boy',soldout: false,canpurchase:true},
          {name:'Kohn', price:25, description:'boy',soldout: false,canpurchase:true}
          ]
          //not mentioned:false


    })();

的index.html

<!DOCTYPE html>
<html ng-app="store">
        <script src="js/angular.min.js" type="text/javascript"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <title>Purple</title>
    </head>
    <body ng-controller = "StoreController as store">
        <script src="js/app.js" type="text/javascript"></script>
        <h1>{{"Create your CV"}}</h1>
        <div ng-repeat="products in store.product">

        <div ng-hide="store.product.soldout">
        <h1> {{store.product.name}} </h1>
        <h2><em class="pull-right">{{store.product.price | currency}}</em></h2>
        <h3> {{store.product.description}} </h3>
        <button ng-show = "store.product.canpurchase"> Add to cart </button>
        </div>

        </div></body></html>

我的代码工作正常，但NG - 重复不起作用，如果我不选择ng-repeat并将每个项目显示为数组，那么我得到一个显示但不是“ng-repeat”..任何想法是我错过了什么？

请不要将此标记为否定，我在提出此问题之前已做了大量研究

小提琴上的代码：http://jsfiddle.net/68Dkz/2/

Answer 1

这是使用控制器别名store的工作版本，如图所示。请注意，由于数组包含多个产品，因此product已更改为控制器中的products。我认为你对于哪个是数组感到困惑，哪个是ng-repeat中的单个项目，因为这个

<div ng-repeat="product in store.products">

    <div ng-hide="product.soldout">
      <h1> {{product.name}} </h1>
      <h2><em class="pull-right">{{store.product.price | currency}}</em></h2>
      <h3> {{product.description}} </h3>
      <button ng-show="product.canpurchase">Add to cart</button>
    </div>

  </div>

的 DEMO

Answer 2

store是您的模块，而不是您的范围，need it in the iteration，products in product而不是

<div ng-repeat="products in product">
   <div ng-hide="products.soldout">
      <h1> {{products.name}} </h1>
      <h2><em class="pull-right">{{products.price | currency}}</em></h2>
      <h3> {{products.description}} </h3>
      <button ng-show = "products.canpurchase"> Add to cart </button>
   </div>
</div>

停止控制器别名，这是不必要的，可能会导致html编译器出现问题
使用products作为迭代器令人困惑，我建议制作集合products和迭代器product

Ng重复功能不起作用

2 个答案: