Question

它应该显示产品列表但是这个返回空白页....无论如何，如果我不使用ng-repeat它工作正常......有人能找到这个代码有什么问题吗？

HTML

<div ng-controller="directiveController as directive">
    <div ng-repeat="dir in directive.directives">
        <h1>{{ directive.dir.name }}</h1>
        <span>{{ directive.dir.description }}</span>
        <b>{{ directive.dir.price }}</b>

        <button ng-show="directive.dir.canPurchase">Add to Cart</button>
    </div>
</div>

JS

var app = angular.module('gemStore', []);

app.controller('directiveController' ,function(){
    this.directives = gems;
});

var gems = 
  [{
      name: 'Produkt 1',
      price: '20 e',
      description:'Na lageru i mozes se poruciti',
      canPurchase: true,
      soldOut: true
  },
  {
      name: 'Produkt 2',
      price: '30 e',
      description:'Nema ga',
      canPurchase: false,
      soldOut: true
  },
  {
      name: 'Produkt 3',
      price: '35 e',
      description:'Trenutno se ne moze poruciti jer je canPurchase false',
      canPurchase: false,
      soldOut: true
  }
  ];

Answer 1

我认为正确的语法是

<div ng-repeat="dir in directive.directives">
    <h1>{{ dir.name }}</h1>
    <span>{{ dir.description }}</span>
    <b>{{ dir.price }}</b>

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

Answer 2

＆＃13;

var app = angular.module('gemStore', []);

app.controller('directiveController' ,function($scope){
    $scope.directives = gems;
});

var gems = 
  [{
      name: 'Produkt 1',
      price: '20 e',
      description:'Na lageru i mozes se poruciti',
      canPurchase: true,
      soldOut: true
  },
  {
      name: 'Produkt 2',
      price: '30 e',
      description:'Nema ga',
      canPurchase: false,
      soldOut: true
  },
  {
      name: 'Produkt 3',
      price: '35 e',
      description:'Trenutno se ne moze poruciti jer je canPurchase false',
      canPurchase: false,
      soldOut: true
  }
  ];

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="gemStore">
<div ng-controller="directiveController">
        <div ng-repeat="dir in directives">
        <h1>{{ dir.name }}</h1>
        <span>{{ dir.description }}</span>
        <b>{{ dir.price }}</b>

        <button ng-show="dir.canPurchase">Add to Cart</button>
        </div>
    </div> 
  </div>

＆＃13;

ng-repeat返回空白页[Angular]

2 个答案: