Of Stack

A simple way to handle radio and check boxes using AngularJS

  • 2020-06-19 09:43:13
  • OfStack

AngularJS's handling of forms is fairly simple. When AngularJS USES two-way data binding for form validation, it is essentially helping us with form processing.

There are many examples of using checkboxes, and many ways we handle them. In this article we'll look at ways to bind checkboxes and radio buttons to data variables and what we can do with them.

Create the Angular form

For this article, we need two files: index.html and app.js. app.js is used to hold all of the Angular code (it's not big), and index.html is where the action runs. First we create the AngularJS file. 


// app.js
 
var formApp = angular.module('formApp', [])
 
  .controller('formController', function($scope) {
  
    // we will store our form data in this object
    $scope.formData = {};
     
  });

In this file, all we do is create the Angular application. We also created a controller and an object to hold all the form data.

Let's look at the index.html file, where we create the form and then do the data binding. We used Bootstrap to quickly lay out the page. 


<-- index.html -->
<!DOCTYPE html>
<html>
<head>
 
  <!-- CSS -->
  <!-- load up bootstrap and add some spacing -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <style>
    body     { padding-top:50px; }
    form      { margin-bottom:50px; }
  </style>
 
  <!-- JS -->
  <!-- load up angular and our custom script -->
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="app.js"></script>
</head>
 
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
 
  <h2>Angular Checkboxes and Radio Buttons</h2>
 
  <form>
   
    <!-- NAME INPUT -->
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" name="name" ng-model="formData.name">
    </div>
     
    <!-- =============================================== -->
    <!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
    <!-- =============================================== -->
     
    <!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
    <button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
     
  </form>
   
  <!-- SHOW OFF OUR FORMDATA OBJECT -->
  <h2>Sample Form Object</h2>
  <pre>
    {{ formData }}
  </pre>
   
</div>
</body>
</html>

Once created, we have the form with name input. If all 1 slices work as we expect, then if you type in name input, you should be able to do so below < pre > The tag segment sees what was typed.

Check box

Checkboxes are very common in forms. Next we'll look at how Angular USES ngModel to implement data binding. If you have a lot of check boxes, it can sometimes be overwhelming how to handle the data when binding it to an object.

Inside the formData object we created, we also created another object. We call it favoriteColors, and it asks the user to select a favorite color: 


<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
  </label>
</div>

When users click any one of the check boxes above, they immediately see that the formData object has changed. We store the value of the check box in the fromData.favoriteColors object. So we pass the checkbox value to the server.

Check the box to click process

Sometimes, when someone clicks the check box, you need to process it. What you need to do might be: calculate a value, change a variable, or do data binding. To do this, you use $scope.yourFunction = function() {}; Create the function in app.js. You can then call this function using ng-ES69en ="yourFunction()" on the checkbox of.

There are many ways to work with form check boxes, and Angular provides a very simple way: call user-defined functions using ES74en-ES75en.

Customize the value of the check box

By default, the value bound to the check box is ture or false. Sometimes, we want to return other values. Angular provides a very good way to do this: using ES83en-ES84en-ES85en and ES86en-ES87en-ES88en.

We add another set of check boxes, but instead of using true or false, we use user-defined values. 


<!-- CUSTOM VALUE CHECKBOXES -->
<label>Personal Question</label>
<div class="checkbox">
  <label>
    <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
    Are you awesome?
  </label>
</div>

In addition, we have now added an awesome variable to the formData object. If set to true at this point, the value should be returned as ofCourse, or iWish if set to false.

Check box

According to the official documentation, this differs from a radio box: 


<input type="radio"
  ng-model="string"
  value="string"
  [name="string"]
  [ng-change="string"]
  ng-value="string">

For more information on check boxes, follow the Angular check box documentation.
The radio button

Radio buttons are easier than checkboxes because you don't need to store multiple options. Radio is just 1 value. Add 1 radio button to see. 


<!-- RADIO BUTTONS -->
<label>Chicken or the Egg?</label>
<div class="form-group">
  <div class="radio">
    <label>
      <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">
      Chicken
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">
      Egg
    </label>
  </div>
</div>

Like this, the radio button is bound to the data object.

Radio button usage

According to the official documentation, this is the option provided: 


<input type="radio"
    ng-model="string"
    value="string"
    [name="string"]
    [ng-change="string"]
    ng-value="string">

Related articles: