在角度上使用ng-repeat

我在某個零件模型上有這個json信息。我有想法顯示在這裏顯示的項目縮略圖的長滾動列表中的信息：http://ionicframework.com/docs/components/#item-thumbnails 在角度上使用ng-repeat

但是，當我嘗試使用ng-repeat與此組件時，我得到一個空白屏幕。它怎麼沒有出現？

.controller('EquipCtrl', function() { 
 
    var equipment = []; 
 
    var equip = { 
 
     "EquipmentID": "gxfrc-3452-e1c33-bcedf-432dd-53432-dff3d", 
 
     "ItemName": "Truck 1", 
 
     "ModelName": "3500", 
 
     "SerialNumber": "12355234", 
 
     "VendorName": "Ford", 
 
     "DimensionsLength": "15", 
 
     "DimensionsWidth": "10", 
 
     "DimensionsHeight": "10", 
 
     "DimensionsWeight": "20000", 
 
     "Comments": "Local owned vehicle", 
 
     "Photo": "truck1photo.jpg", 
 
     }; 
 

 
    equipment.push(equip); 
 
})

<body ng-app="starter"> 
 
     <ion-view> 
 
      <div class="list" ng-repeat="equip in equipment"> 
 
      <a class="item item-thumbnail-left"> 
 
       <img>{{equip.Photo}}</img> 
 
       <h2>{{equip.SerialNumber}}</h2> 
 
       <p>{{equip.ItemName}}</p> 
 
      </a> 
 
      </div> 
 
     </ion-view> 
 
</body>

我相信我這樣做是錯誤的。任何人都可以幫我弄清楚爲什麼我的屏幕是空白的？我以前使用過ng-repeat，但從來沒有使用過item-thumbnail組件。

來源

2016-11-02 Austin

設置控制器，你有沒有設置你的標記控制器？而且你在你的控制器中缺少'$ scope.equipment'。 – Aer0

你需要注入$scope和設備變量分配給它

.controller('EquipCtrl', function($scope) { 
$scope.equipment = []; 
var equip = { 
    "EquipmentID": "gxfrc-3452-e1c33-bcedf-432dd-53432-dff3d", 
    "ItemName": "Truck 1", 
    "ModelName": "3500", 
    "SerialNumber": "12355234", 
    "VendorName": "Ford", 
    "DimensionsLength": "15", 
    "DimensionsWidth": "10", 
    "DimensionsHeight": "10", 
    "DimensionsWeight": "20000", 
    "Comments": "Local owned vehicle", 
    "Photo": "truck1photo.jpg", 
    }; 
$scope.equipment.push(equip); 
})

而且你可能需要在你的模板

<body ng-app="starter"> 
     <ion-view ng-controller="EquipCtrl"> 
      <div class="list" ng-repeat="equip in equipment"> 
      <a class="item item-thumbnail-left"> 
       <img>{{equip.Photo}}</img> 
       <h2>{{equip.SerialNumber}}</h2> 
       <p>{{equip.ItemName}}</p> 
      </a> 
      </div> 
     </ion-view> 
</body>

來源

2016-11-02 19:00:12 k10der

固定。萬分感謝。我在我的app.js中設置控制器。謝謝 – Austin

不客氣！ :) – k10der

在角度上使用ng-repeat

回答

相關問題