4. Built in and Custom Directives | Would you help a brother out?


#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

Hello I am Stucked with the last part of this problem.
<Below this line, add a link to the EXACT exercise that you are stuck at.>
The instruction is as below:
In the view, use ng-repeat to loop through $scope.apps and display each element. To do this, add ng-repeat to a div class=“card” and then use the custom directive to display each element.

<In what way does your code behave incorrectly? Include ALL error messages.>
My code is as below, I see the result tab seems works.

<!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="//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">
          <app-info info="move"></app-info>
        </div>

        <div class="card">
          <app-info info="shutterbugg"></app-info>
        </div>

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

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

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

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

  </body>
</html>




My code of MainController.js is as below:

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

  $scope.shutterbugg = {
    icon: 'img/shutterbugg.jpg',
    title: 'Shutterbugg',
    developer: 'Chico Dusty',
    price: 2.99
  };

  $scope.gameboard = {
    icon: 'img/gameboard.jpg',
    title: 'Gameboard',
    developer: 'Armando P.',
    price: 1.99
  };

  $scope.forecast = {
    icon: 'img/forecast.jpg',
    title: 'Forecast',
    developer: 'Forecast',
    price: 1.99
  };
  
  $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/shutterbugg.jpg',
      title: 'Repeat',
      developer: 'Codeacademy',
      price: -10
    },
    {
      icon: 'img/shutterbugg.jpg',
      title: 'Boring',
      developer: 'Codecademy2',
      price: -100
    }
  
    
  ];
}]);

Sorry for some reason I seems can’t put this file in form. It seems messy. I am struggle what the instruction want me to do exactly. Anyone did this question before? Please help a brother out! Thx!


#2

Delete all of the other .card divs and leave only the ng-repeat .card. This worked for me hope it does the same for you :slight_smile:


#3

Thanks man. Worked for me as well. But the instructions must have been clear.


#5

Hi, could somebody explain this piece of code to me. The more clear and simple the better :slight_smile: Especially whta is ‘app in apps’, and what each part is doing. Thanks :wink:


#6

Maybe someone will explain it more correctly.
As far as I understand, in the “app in apps” expression, the “app” is the name of the object in the view, this could be anything else and defines how you should refer the object inside the div; " in apps" defines in which collection the object you wish to use is loaded and it has to correspond to the name you gave to the collection in you controller.


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.