What's the single worse feeling in the world? Answer: When disaster strikes, and you need to call a superhero, but you've forgot their phone number.
That's why you're going to build a Superhero Phone Book!
Your application will display a list of superheroes and their phone numbers in the browser. The user should be able to search that list and the list should be color-coded based on the hero's comics affiliation (e.g., DC, Marvel). You'll also want to add a button next to each superhero that, when clicked, causes the hero's image to be displayed on the page.
$ git clone git@github.com:ga-wdi-exercises/angular-superheroes.git
Fork and clone this repository. You will be working in the provided three files... index.html
, app.js
and style.css
.
To complete this assignment, you'll need to complete the following steps...
- Bootstrap your angular application (i.e., create a module, use
ng-app
). - Create a controller.
- Attach a controller to your view.
- Define a collection of superheroes in your
app.js
. Each superhero should be an object literal with 4 attributes: name, phone number, comics affiliation and image URL. - Use
ng-repeat
to render the list of superheroes. - Create a search form. Use
ng-model
to bind that form's input to a value in the view model. - Use
filter
withng-repeat
to limit the number of superheroes shown in the browser based on user input. - Research and use
ng-class
to add a class to each superhero in the list indicating their comics affiliation (e.g.,ng-class=
...). Use that class to color code the list depending on their affiliation (e.g., all Marvel heroes should appear as blue). Theng-class
has a particular expectation about the type of the value. - Add a button next to each superhero. When clicked, their image should appear within their listing. Since you will need to keep track of each individual superhero's hide/show status, research using
$index
withng-repeat
.
- Filter Documentation
- ngClass Documentation
- Intro to Angular Lesson Plan
- AngularJS Tutorial
- ngRepeat Documentation
- Create a form that allows the user to add a superhero to the list.
- Create another form that allows you to edit a superhero in the list. This form should only appear when the user clicks an "Edit Hero" button.