Create A CheckBox List With Angular
- Estimated read time: 5 min read
- Written by Chad Campbell on Aug 25th 2013
Occasionally, you want to allow a user to select multiple related options. A lot of times, this task is tackled with the help of a checkbox list. This post will show you how to create a checkbox list using Angular. Adding a checkbox list involves the following five steps.
Step 1: Setup your Angular app
Let's assume that you already have a web page. To leverage angular, you need to do two things:
- Reference the Angular toolset
- Add the
ng-appto the element that represents the root element of your app.
These two steps are shown in the code snippet below.
You can see in line 2 that the
ng-app attribute is used to define the root element of our Angular app. Line 4 is where we actually reference the AngularJS toolset.
Step 2: Reference a controller
Angular relies on a controller to provide behavior for a view. This controller is set via the
ng-controller attribute. This attribute can get added to the view's
BODY element. This attribute is assigned the name of the class that represents the controller. For the sake of our example, we'll assume a class named
TeamsListCtrl, is defined in a file called controllers.js. We'll setup controllers.js in the next step.
Please note, the
ng-controller attribute set in line 6 does not have to be set on the
BODY element. That's only how we're using it in this example. For a more detailed explaination on the
ng-controller attribute, please review the documentation.
Step 3: Define your controller
The controller provides the behavior behind the DOM elements in your view. When initiated, the controller is passed an object called
$scope is basically the application model. In our context, we are going to append a property called
teams to the application model. This property will be a collection of objects that will serve as our data source for the checkbox list. Check out how the controller is defined.
This controller adds a collection of six teams to the
$scope. Its important that the syntax of the controller is accurate. If your syntax is out-of-whack, your view may not render properly.
Step 4: Create the checkbox list
In your view, you can define a checkbox list with the help of three things:
DIVelement for the list itself
- A repeater
- A CSS Class
In the example above, the
checkboxList CSS class is referenced in line 1. This class is defined in the next step. On the next line, the
ng-repeat="team in teams" statement is used to define an Angular repeater. This repeater directs Angular to create a
LABEL element with a checkbox and the team name for each team in the list of teams within
Step 5: Define the checkbox list style
We need to define a style for our checkbox list for two primary reasons: 1) To set the dimensions (height and width) of the control and 2) declare how items that expand beyond the bounds of the control should impact the control itself. Everything beyond these two things is for looks. For the sake of our example, we're going to create a checkbox list that has a black border and white background.
This CSS class definition sets the height and width of our control in lines 5 and 6. In the event that the list of items expands beyond the vertical dimensions of the checkbox list, we'll show a scrollbar. This is setup on line 7 with the
overflow-y: scroll; statement. You may choose to define your style inline, in document, or in a referenced stylesheet. Regardless of the approach you choose, this is the style choices we made for this example.
These five steps show how to create a checkbox list using Angular. If you want to see a completed example, you can view it here. The code used for this blog post can be downloaded here. If you're curious about creating a checkbox list with knockout instead, that article is available here. If you have any questions or comments related to this post, please leave them in the comments below. If you would like other help from Ecofic, please contact us.