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:

  1. Reference the Angular toolset
  2. Add the ng-app to the element that represents the root element of your app.

These two steps are shown in the code snippet below.

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    </head>

    <body>

    </body>
</html>

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.

<head>
  ...
  <script src="res/js/controllers.js"></script>
</head>

<body ng-controller="TeamListCtrl">

</body>

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. $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.

function TeamListCtrl($scope) {
    $scope.teams = [
        { name: "Red", id: 0, isChecked: true }, 
        { name: "Blue", id: 1, isChecked: false }, 
        { name: "Green", id: 2, isChecked: true },
        { name: "Yellow", id: 3, isChecked: true }, 
        { name: "Orange", id: 4, isChecked: false }, 
        { name: "Purple", id: 5, isChecked: true }
    ];
}

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:

  1. A DIV element for the list itself
  2. A repeater
  3. A CSS Class
<div id="teamCheckboxList" class="checkboxList">
    <div ng-repeat="team in teams">
        <label>
                <input type="checkbox" ng-model="team.isChecked" />
                <span>{{team.name}}</span>
            </label>
    </div>
</div>

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 $scope.

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.

.checkboxList {
    border:1px solid #000;
    background-color:#fff; 
    color:#000;
    width:300px; 
    height: 100px; 
    overflow-y: scroll;
}

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.


Comments

comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.


Follow Chad Online