Home > Developer > JavaScript
A simple method to process single-dataset and check boxes using AngularJS
This article mainly introduces how to use AngularJS to process single keys and check boxes. It is very simple to compile the AngularJS form. For more information, see
AngularJS's processing of forms is quite simple. When AngularJS uses the two-way data binding method for form verification, it actually helps us with form processing.
There are many examples of using check boxes, and there are also many ways to process them. In this article, we will take a look at how to bind the check box and the single-choice button with the data variable and how we handle it.
Create an Angular form
In this article, we need two files: index.html and app. js. App.js is used to save all angular code (, and index.html is the place where the action runs. First, create an AngularJS file.
?
| 1 2 3 4 5 6 7 8 9 10 |
// 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, what we do is to create an Angular application. We also created a controller and an object to save all form data.
Next, let's take a look at the index.html file. In this file, we created a form and bound the data. We use Bootstrap to quickly layout pages.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<-- 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
<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-danger btn-lg"> Send Away! </Button>
</Form>
<! -- Show off our formdata object --> <H2> Sample Form Object <Pre> {FormData }} </Pre>
</Div> </Body> </Html> |
After creation, we have a form with name input. If everything runs as we imagined, if you type the content in name, you should be able to see the entered content in the <pre> label section below.
Check box
In forms, check boxes are very common. The following describes how Angular binds data using ngModel. If there are many check boxes, it is confusing to process data when you bind them to an object.
Inside the formData object we created, we also created another object. We call it favoriteColors, which requests the user to select the favorite color:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<! -- 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 you click any of the above check boxes, they immediately see a change to the formData object. We store the value of the check box in the fromData. favoriteColors object. In this way, the value of the check box is passed to the server.
Check box click to process
Sometimes, when someone clicks the check box, you need to process it. You may need to do the following: Calculate a value, change some variables or bind data. To implement this, you need to use $ scope. yourFunction = function () {}; to create a function in app. js. Then you can use ng-click = "yourFunction ()" on the check box to call this function.
There are many ways to process form check boxes. Angular provides a very simple method: Use ng-click to call user-defined functions.
Value corresponding to the custom check box
By default, the value bound to the check box is true or false. Sometimes, we want to return other values. Angular provides a very good processing method: Use ng-ture-value and ng-false-value.
We add another set of check boxes. However, in this case, we do not use true or false, but user-defined values.
?
| 1 2 3 4 5 6 7 8 |
<! -- 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 added an awesome variable to the formData object. If this value is set to true, the returned value is ofCourse. If this value is set to false, the returned value is iWish.
Check box
According to the official instructions, this is different from the singleton:
?
| 1 2 3 4 5 6 |
<Input type = "radio" Ng-model = "string" Value = "string" [Name = "string"] [Ng-change = "string"] Ng-value = "string"> |
For more information about check boxes, see Angular check box instructions.
Radio button
A single-choice button is easier than a check box, because you do not need to store multi-choice data. A single-choice button is a value. Add a single-choice button below.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<! -- 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> |
In this way, the single-choice button is bound to the data object.
Radio button usage
According to the official documentation, this is an option:
?
| 1 2 3 4 5 6 |
<Input type = "radio" Ng-model = "string" Value = "string" [Name = "string"] [Ng-change = "string"] Ng-value = "string"> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
