gadin gadin - 1 month ago 15
AngularJS Question

Using ng-repeat in angular

I have this json information on a certain part model. I had the idea to show the information in a long scrolling list of item thumbnails shown here: http://ionicframework.com/docs/components/#item-thumbnails

But when I try to use ng-repeat with this component, I get a blank screen. How come it isnt showing up?



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





I am sure I am doing it wrong. Can anyone help me figure out why my screen is blank? Ive used ng-repeat before, but never with the item-thumbnail component.

Answer

You need to inject $scope and assign equipment variable to it

.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);
})

And you probably need to set controller in your template

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