ng-repeat返回空白页

ng-repeat return blank page [Angular]

本文关键字：空白 返回 ng-repeat      更新时间：2023-09-26

它应该显示产品列表，但此返回空白页....不管怎样，如果我不使用ng-repeat，它工作得很好……有人能找到这个代码有什么问题吗?

<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
  }
  ];

我认为正确的语法是

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


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
  }
  ];
<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>

相关文章：