Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by james white
james white
78,399 Points

Your own widget: Radio buttons

Link to challenge:

http://teamtreehouse.com/library/angularjs-2/making-your-own-widget/your-own-widget-radio-buttons

In the videos, we used a dropdown to let the user choose their gender. This time, let's use radio buttons instead. Update index.html to add a radio button that updates the user's gender attribute to "male", and another that updates it to "female".

Seems like a simple question, but I tried a bunch of variations and it wasn't passing.

I wish the AngularJS course has some zip files to download so you at least had a little bit of code to work with..

Failing that I had to go searching and found this page:

http://odetocode.com/blogs/scott/archive/2013/06/25/radio-buttons-with-angularjs.aspx

...that had this code:

<div data-ng-controller="EngineeringController">
    {{engineer.name }} is currently
    {{ engineer.currentActivity }} for
    {{ engineer.project }}
    <label>
        <input type="radio" name="project"
               value="App A" ng-model="engineer.project" />
        App A
    </label>
    <label>
        <input type="radio" name="project"
               value="App B" ng-model="engineer.project" />
        App B
    </label>
    ...
</div>

Using this example of how to write an input type="radio".

I came up with this code (leaving out the ng-model because the challenge didn't seem to specify this:

      <label>
        <!-- ADD THE "male" RADIO BUTTON HERE -->
        <input type="radio" name="gender"
               value="male" /> Male
      </label>
      <label>
        <!-- ADD THE "female" RADIO BUTTON HERE -->
        <input type="radio" name="gender"
               value="female" /> Female
      </label>

Of course I got an error:

Bummer! You need to set the ng-model attribute of the male radio button to 'user.gender'.

Well, why didn't you say so in the first place! :frowning:

So I added in the necessary ng-model code (for both make and female):

      <label>
        <!-- ADD THE "male" RADIO BUTTON HERE -->
        <input type="radio" name="gender"
               value="male" ng-model="user.gender" /> Male
      </label>
      <label>
        <!-- ADD THE "female" RADIO BUTTON HERE -->
        <input type="radio" name="gender"
               value="female" ng-model="user.gender" /> Female
      </label>

Another challenge completed... :satisfied:

On to the next challenge:

https://teamtreehouse.com/forum/using-factories-in-a-controller-challenge-incorrectly-refuses-the-creation-of-a-controller-w-the-array-annotation