Adding Functionality to the Student Roster

If you were a teacher and this were a real class of students, there are a number of things you would want to be able to do with your app. A few of those things are:

• Mark Absent or Present.

• Navigate to a detail page to see or edit the information that is not present on the list.

• Remove a student from the class, with the appropriate warnings, of course.

In this chapter, you will enhance the UI of the Roster Page to do all of these things.

The first thing I want to do is add a menu to each student in the ion-list. You can either create the menu first or the button to launch the menu first. Here, we will create the menu first. For that, you are going to use an ion-action-sheet.

ion-action-sheet

An action sheet is a menu that displays like a dialog. It often contains at least two (but usually more) action buttons that are contextually related in some way. In our case, the context is that of the currently selected student.

An ion-action-sheet is Ionic’s specific implementation, rendering an action sheet that automatically looks great on an iPhone or Android.