AngularJS Directive to loop through array

Question

Using AngularJS, I need to create a directive that loops through an array and displays the relevant information:

Here is my code so far but for some reason it is now working. Kindly help. What is being displayed is the text below as plain text. Obviously the images are not being loaded as well.

info.title
info.developer
info.price | currency

Here are the files used.

appInfo.html - the template to be used by the directive for each element

<img class="icon" ng-src="{{ info.icon }}"> 
<h2 class="title">{{ info.title }}</h2> 
<p class="developer">{{ info.developer }}</p> 
<p class="price">{{ info.price | currency }}</p>

appInfo.js - directive

app.directive('appInfo', function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    templateUrl: 'appInfo.html' 
  }; 
});

app.js - module

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

controller - repeated elements to test

app.controller('MainController', ['$scope', function($scope) {
  $scope.apps =
    [ 
  { 
    icon: 'img/move.jpg', 
    title: 'MOVE', 
    developer: 'MOVE, Inc.', 
    price: 0.99 
  }, 
  { 
    icon: 'img/shutterbugg.jpg', 
    title: 'Shutterbugg', 
    developer: 'Chico Dusty', 
    price: 2.99 
  },
    { 
    icon: 'img/move.jpg', 
    title: 'MOVE', 
    developer: 'MOVE, Inc.', 
    price: 0.99 
  }, 
  { 
    icon: 'img/shutterbugg.jpg', 
    title: 'Shutterbugg', 
    developer: 'Chico Dusty', 
    price: 2.99 
  } 
];
}]);

index.html

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the AngularJS library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  </head>
  <body ng-app="AppMarketApp">
    <div class="header">
      <div class="container">
        <h1>App Market</h1>
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">          

        <div class="card" ng-repeat="a in apps"> 
  <app-info info="{{a}}"></app-info>
        </div>   

      </div>
    </div>

    <!-- Modules -->
    <script src="app.js"></script>

    <!-- Controllers -->
    <script src="MainController.js"></script>

    <!-- Directives -->
    <script src="appInfo.js"></script>

  </body>
</html>

Thanks in advance.

whats wrong with the ng-repeat directive?

Josh Harrison
– Josh Harrison

2015-10-21 14:56:02 +00:00
Commented Oct 21, 2015 at 14:56 — Josh Harrison
– Josh Harrison, Commented Oct 21, 2015 at 14:56

dendimiiii · Accepted Answer · 2015-10-21 15:05:01Z

4

You should do

<div class="card" ng-repeat="a in apps"> 
  <app-info info="a"></app-info>
        </div>

Attributes that already expect expressions don't need curly braces.

answered Oct 21, 2015 at 15:05

dendimiiii

1,6993 gold badges16 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Directive to loop through array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related