Shaping Up With AngularJS Level 2 Challenge 9

[JoseTomasTocino]

moderator: Fixed (in development, and will be out in prod upon the next deploy)

• can reproduce still, and going to fix in development

---

In the 2.9 point, "Creating a GalleryController" in the Shaping Up with Angular JS course, the description for the third objective reads:

Add a method to GalleryController called setCurrent that accepts a value and assigns it to current. If no value is passed in, set current to 0.

So I tried using this code:

this.setCurrent = function(value) {
  if (typeof value == 'undefined') value = 0;
  this.current = value;
};

But the course said that the solution is invalid. When I pressed on Check my work, it says the following:

In the setCurrent function, only set this.current to the passed in value when that value is not null. If the value is null, set current to 0.

Err... Seriously? As the original statement says, when no value is passed, the argument is not null, but undefined. Only if you check for null in your code it'll pass the check.

[monsieurmechant]

moderator: error in code so not an issue Fixed (in development, and will be out in prod upon the next deploy)

• I see what the goal was, but the type due to how forms in this case interact is a string
• further, want to check for undefined, as that's the proper way to indicate no parameter was passed
• I was previously incorrect, and this is in fact a number--the appearance of a string was actually due to a mocked test--so this check in the context of this challenge is legit

---

Yeah, I got confused by that one too.
I did this:

    this.setCurrent  =  function(newCurrent){
      this.current = (typeof newCurrent === "number" ? newCurrent : 0);   
    };

And it didn't work either.

[gregrafferty]

Try

this.setCurrent = function(value) {
  this.current = value || 0;
};

Worked for me, although I was having trouble getting it to check it properly. Had to manually click the check work button after refreshing the page and pasting my solution back in.

[barbarajohnson]

That worked for me gregrafferty. Thank you.

[kalefranz]

moderator: Fixed (in development, and will be out in prod upon the next deploy)

• can reproduce still, and going to fix in development

---

Here was my solution

this.setCurrent = function(val) {
this.current = val === undefined ? 0 : val;
};

But when I clicked the "Check Work" button, the hint message forced me to use null instead of undefined. Per this stackoverflow thread, it sounds like undefined is actually the more correct behavior.

Can someone with more javascript knowledge comment?

(Also, I think using typeof to check for "number" is the best solution, but still feel like my question is relevant.)

[snychka]

Hi. Basically as the op here says and the so post you link to says, yes, your way (and the op's way ... pretty much the same thing) is correct, as long as you make the reasonable assumption that "If no value is passed in" means no arg. is passed such as insetCurrent();

[Vahidebr]

Hi mates
Actually i didn't get the concept of this controller

Add a method to GalleryController called setCurrent that accepts a value and assigns it to current. If no value is passed in, set current to 0.

Why we need this controller and what should it do ?

Thanks

[snychka]

Hey.

Its purpose (i.e., why you need it) will become apparent in the next challenge. GalleryController will allow the image with index this.current to be displayed. (And, as it's a course, you can also look at it this way: you need the controller because 2.9 says you do )

What it does: it'll have a current var., and a setCurrent func. setCurrent, if passed null will set current to zero, otherwise it'll set current to its parameter. This is what you need to do, but is not what is asked. See this post on 2.9 for more info.

Ask more if this doesn't answer your questions. Cheers

[valmach]

moderator: error in code

• and when remove gems part it works, so can't reproduce error.

---

This is the Answer, however system will not accept.. Error:

app not defined.

app.controller('GalleryController', function(){
  this.current = 0;
  this.setCurrent = function(newGallery){
    this.current = newGallery || 0;
  };
});

var gems = [{

[snychka]

Hi. You have an errant, syntactically incorrect line, var gems = [{

Getting rid of that last line, the rest of the code above passes all 3 tasks for me.

[valmach]

Hi, thanks for the clue, however also tried that since posting .. still not working. using Chrome OSX 10.9.4 ..

[snychka]

Hi. I was using FF, but switched over to Chrome and tried it. It worked. I do have Mountain Lion and not Mavericks, but that likely isn't the issue.

It could be a caching issue. A post that addresses that. Also, make sure you're logged in. When I go to the angular course it often doesn't show me as logged in--evident by going to the ToC, and noticing no challenges are seen as completed--so at the ToC I refresh before re-doing any challenges.

If none of that works, please post your entire app.js , even the non-editable stuff, and the error message ... maybe there's an error elsewhere.

Cheers

[valmach]

Hi ,
appreciate the response., also using MAC OSx 10.9.4 .. Chrome.. still no joy.. thanks for advice

[AndreFroes]

moderator: Fixed (in development, and will be out in prod upon the next deploy)

• can reproduce still, and going to fix in development

---

Hello,

Can someone help me to find out if this is a bug or no? I have a bit of experience with programming in js/jquery and now I am trying to learn angular and I am facing a possible problem when compiling the exercise.

Level 2 Challenge 9

Add a method to GalleryController called setCurrent that accepts a value and assigns it to current. If no value is passed in, set current to 0.

I added a simple ternary statement to it, but it is not accepting it at all:

app.controller('GalleryController', function(){
  this.current = 0;
  this.setCurrent = function(n){
    this.current = (typeof n === 'undefined' ? 0 : n);
  }
});

I even ran some tests in jsfiddle to see if something was wrong, and it works like a charm. Could this be a bug in the js compiler that the exercises uses?

[snychka]

Hi. The error messages led me to the issues: 1) missing semi-colon, 2) check for n being null instead:

app.controller('GalleryController', function() {

  this.current = 0;

  this.setCurrent = function(n) {
    //this.current = (typeof n === 'undefined' ? 0 : n);
    this.current = (n === null ? 0 : n);
  };
  
});

So, for future reference, click the submit button to get error messages. In this case, they were very useful.

But, the semi-colon after the function def'n I don't think is technically required. I believe it's because CS uses jslint or jshint. Still, I personally think it should be there, but ideally a warning should be given as opposed to an error.

And, your check for undefined is correct, as that better equates to "If no value is passed in..."

I believe this was posted at some point once or twice in the past on this forum.

CS should accept your code, and not accept mine.

Cheers

[AndreFroes]

moderator: cannot reproduce

• maybe browser issues, but no such indication
• currently both work.

---

Thanks for the answer snychka, but it didn't work, i bought the answer from exercise, it was

funny, i did the workaround suggested by the exercise but with other variable names in the function, but it worked only when i set it with the var name proposed by the answer:

my answer (not working):

app.controller('GalleryController', function(){
  	this.current = 0;
    this.setCurrent = function(n){
      this.current = n || 0;
    };
  });

exercise proposal:

app.controller('GalleryController', function(){
  this.current = 0;
  this.setCurrent = function(newGallery){
    this.current = newGallery || 0;
  };
});

go figure right?!

[jamesYu]

Thanks, this question might be somewhat minor, but I did try on my images but thumbnail images cannot be shown... only three big images only...
my images are .jpg files and sized 112*92px.

in the challenges, the preview show one big image and three thumbnails, but not to me. hh
let me know, please....

in chrome browser, challenge preview show bootstrap small-image style works but not mine....

[snychka]

Hi. I'm not sure if you need help on a challenge, or are doing something on your own machine and instead need help w/ that.

If it's the former, please post the challenge w/ which you're having difficulties.

If the latter, then please create a really small, simple version of your application that suffers from the same problem, and post the html and js.

I and others should be able to help you out from there, as we'll then have some context w/ which to work.

[Tomislav80]

Simple version with no bootstrap code:

HTML file (first you get big image with {{product.images[2]}} in my case, and then 3 smaller):
...

<div class="gallery">
  <img  ng-src="{{product.images[2]}}" />
    <ul>
      <li ng-repeat="image in product.images"> <img ng-src="{{image}}" /> </li>
    </ul>
</div>

Controler (note part with images[ .... ] field, from there you get your pictures, btw I changed names and paths of the images since I did local testing):

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function() {
    this.products = gems;
  });

  var gems = [{
    name: 'Azurite',
    description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.",
    shine: 8,
    price: 110.50,
    rarity: 7,
    color: '#CCC',
    faces: 14,
    images:[
      "img/1.jpg",
      "img/2.jpg",
      "img/3.jpg"
    ],	
  },

If you get it to work (showing 1 big and 3 small pictures for every gem, then ass bootstrap code and it should work.
Good luck.

T.

[7stud]

I'm having the same problem. I looked at a list of all the Bootstrap3 classes here:

exhaustive list of Bootstrap3 classes

and there is no such class as "small-image". And, as far as I can tell, Bootstrap wouldn't use a class name like that anyway--instead Bootstrap uses class names like: "img-sm", "img-lg", etc. Yet, nothing like that exists in Bootstrap3.

That means the class name "small-image" was created by the tutorial--yet the index.html page does not link to any additional css files, e.g. app.css, that define what that class name does, and in the git repo there are no additional css files.

So...the tutorial is broken.

To get the large images to display as thumbnails, I used the width and height attributes of the img tag. The Bootstrap3 "thumbnail" class just puts a border around the image--it doesn't affect the size. For the thumbnail images, I just used random images I downloaded from the git repo here:

git repo

Here's my app.js:

(function() {

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

app.controller('StoreController', function() {
  this.products = gems;

});

var gems = [
{
  name: 'Dodecahedron',
  price: 2.00,
  description: "Cool gem",
  canPurchase: true,
  soldOut: false,
  images: [
    'images/gem-01.gif',
    'images/gem-03.gif',
    'images/gem-05.gif',
  ] 
},
{
  name: 'Pentaconal Gem',
  price: 5.95,
  canPurchase: true,
  soldOut: false,
  images: [
    'images/gem-02.gif',
    'images/gem-04.gif',
    'images/gem-06.gif',
  ]
}]

})()

Here's my index.html:











<body ng-controller="StoreController as store">
  <div class="list-group">
    <div class="list-group-item"
         ng-repeat="product in store.products" 
         ng-hide="gem.soldOut">

      <h3>{{product.name}} 
        <em class="pull-right">{{product.price | currency}}</em>
      </h3>

      <div>
        <img ng-src="{{product.images[0]}}" class="pull-right" width="150" height="150">
      </div>

      <div>
        <ul class="list-inline clearfix">
          <li ng-repeat="img in product.images">
            <img ng-src="{{img}}" class="pull-left thumbnail" width="50" height="50">
          </li>
        </ul>
      </div>

      <div>
        <button type="button" class="btn btn-primary" ng-show="product.canPurchase"> Add To Cart </button>
      </div>

    </div>
  </div>


  <script src="js/angular.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

Note that in my project directory, I have sub directories named js/, css/, and images/. Also, I was unable to use the minified version of Bootstrap because it was causing 'map' errors.

Later, you will need to add some css to get the default tab to show its active state correctly, like in the video. I added a css/app.css file to my project, which contains the following css:

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
      color: #555555;
      background-color: orange;  
}

...which applies to this html:

    <ul class="nav nav-pills">
      <li ng-class="{active: tab.isActiveTab(1)}">
        <a role="presentation" href="#" ng-click="tab.setTab(1)">Description</a>
      </li>

You'll need to link to css/app.css after the Bootstrap css.