Home > Article > Web Front-end > Simple way to handle radio buttons and checkboxes using AngularJS_AngularJS

Simple way to handle radio buttons and checkboxes using AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:53:521137browse

AngularJS’s form processing is quite 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 there are many ways we can deal with them. In this article we will take a look at binding checkboxes and radio buttons to data variables and what we can do with it.

Create Angular form

In this article, we need two files: index.html and app.js. app.js is where all the Angular code is held (it's not big), and index.html is where the actions run. 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 take a look at the index.html file. In this file, we create the form and then perform data binding. We used Bootstrap to quickly layout 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 class="brush:php;toolbar:false">
    {{ formData }}

After the creation is completed, we have a form with name input. If everything works as we imagined, if you type something in the name input, you should be able to see it in the e03b848252eb9375d56be284e690e873 tag section below.

Checkbox

Checkboxes are very common in forms. Next we will take a look at how Angular uses ngModel to implement data binding. If you have a lot of checkboxes, 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 the 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 the user clicks on any of the checkboxes above, they immediately see the formData object change. We store the checkbox value in the fromData.favoriteColors object. In this way we pass the checkbox value to the server.

Checkbox click processing

Sometimes you need to do something with someone after they click on a checkbox. The processing you need to do may be as follows: calculate a value, change some variables, or perform data binding. To do this, you create the function within app.js using $scope.yourFunction = function() {};. Then you can use ng-click="yourFunction()" on the checkbox to call this function.

There are many ways to handle form checkboxes, and Angular provides a very simple method: use ng-click to call a user-defined function.

Customize the value corresponding to the check box

By default, the value bound to the checkbox is true or false. Sometimes we want to return other values. Angular provides a very good way to deal with this: using ng-ture-value and ng-false-value.

We add another set of checkboxes, but this time we no longer use true or false, but 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&#63;
  </label>
</div>

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

Checkbox

According to the official documentation, this is different from the radio button:

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

To learn more about checkboxes, please follow the Angular checkbox documentation.
Radio button

Radio buttons are easier than check boxes because there is no need to store multiple-choice data. A radio button is a value. Let’s add a radio button to see.

<!-- RADIO BUTTONS -->
<label>Chicken or the Egg&#63;</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>

Just like this, the radio button is bound to the data object.

Radio button usage

According to the official documentation, these are the options provided:

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Image and text automatic carousel effect plug-in implemented by JQuery_jqueryNext article：Image and text automatic carousel effect plug-in implemented by JQuery_jquery

See more

Simple way to handle radio buttons and checkboxes using AngularJS_AngularJS

Related articles