Using ng-repeat in angular

Question

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.

Have you been setting the controller for your markup? And also you're missing $scope.equipment in your controller. — Aer0
– Aer0, Commented Nov 2, 2016 at 19:01

k10der · Accepted Answer · 2016-11-02 19:00:12Z

1

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>

answered Nov 2, 2016 at 19:00

k10der

7241 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Austin Over a year ago

Fixed. Thanks a ton. I am setting the controller inside of my app.js. Thank you

Collectives™ on Stack Overflow

Using ng-repeat in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related