Made it through Pizza App no prob, Stuck on MoveLog


#1

Hey everyone I am Anthony. Total newb but trying my butt off to learn. For the most part I am flying right on through and loving but every now and then I get a little stuck. This is the first time I cant figure it out on my own. Would someone mind giving me a hand figuring this glitch out? Thanks!

The border for the icon appears but no image and no matter {{ exercise.name }} or {{exercises.name }} I do not get the names.

heres is the code snippet:




MOVE Log

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

    <!--
    TODO: Loop through exercises and display each one with this HTML-->
    <div class="row" ng-repeat="exercises in exercises">
      <div class="exercise-icon col-xs-2"><img ng-src="{{ exercise.icon }}"> </div>
        
      <div class="col-xs-6">
        <p class="exercise-name">{{ exercises.name }} </p>
      </div>
      
      <div class="col-xs-4 counters">
        <span class="decrease">-</span><span class="count">  </span><span class="increase">+</span>
      </div>
    </div>


#2

You've confused yourself a bit with the looping - exercises is the array you're trying to access, so you should give the temporary variable a different name (such as exercise (no plural)).

What you've done though is given the temporary variable the same name as your array ('exercises') then attempted to access {{ exercise.icon }}


#3

You will need ng-repeat = "exe in exercises"since this is a array and you'd like to show each of them.
Then in {{}} or ng-bind you need exe.name.

for "exe, exercise or whatever", you can name it what you like.


#4

Your code should work, it worked for me. See below.

Comment about 'exercises in exercises.' Like everyone said, use a name different from the actual array. The array is named "$scope.exercises" in the controller, so feel free to use exercise, exe, a, b, c..... While it will work like in my example, it can get a bit confusing later on.

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="MoveLogApp">
    <div class="header">
      <div class="container">
        MOVE Log
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container" ng-repeat ="exercises in exercises">
        TODO: Loop through exercises and display each one with this HTML
        <div class="row">
          <div class="exercise-icon col-xs-2">
          <img ng-src="{{ exercises.icon }}">
</div>
            
          <div class="col-xs-6">
            <p class="exercise-name"> {{exercises.name}}</p>
          </div>
          
          <div class="col-xs-4 counters">
            <span class="decrease" ng-click="decrease($index)">-</span><span class="count"> {{exercises.count}} </span><span class="increase" ng-click="increase($index)">+</span>
          </div>
        </div>
        
      </div>
    </div>

    <div class="footer">
      <div class="container">
      </div>
    </div>
    
    <!-- Modules -->
    <script src="js/app.js"></script>

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

  </body>
</html>