1200字范文 > js复选框和单选按钮_以角形式处理复选框和单选按钮

js复选框和单选按钮_以角形式处理复选框和单选按钮

时间：2019-02-05 22:35:53

js复选框和单选按钮

AngularJS makes dealing with forms extremely easy. When it comes to two-way data-binding to the way it helps us handle form validation, Angular really helps us process forms.

AngularJS使处理表单变得非常容易。当涉及到双向数据绑定以帮助我们处理表单验证的方式时，Angular确实可以帮助我们处理表单。

We've written in the past on the great features of Angular in forms and how to process forms. Today will be a quick tutorial on dealing with checkboxes and radio buttons in Angular forms.

过去，我们已经介绍了Angular表单的主要功能以及如何处理表单。今天将是一个快速教程，介绍如何处理Angular形式的复选框和单选按钮。

There are many different use cases for checkboxes and many different ways we can process them. We'll take a look at the ways to bind checkboxes and radio buttons to data variables and the ways we can tweak them.

复选框有许多不同的用例，我们可以使用多种不同的处理方式。我们将研究将复选框和单选按钮绑定到数据变量的方法以及调整方法。

设置我们的角形 (Setting Up Our Angular Form)

For this tutorial, we will need 2 files.index.htmlandapp.js.app.jswill hold all of our Angular code (it won't be much) andindex.htmlwill be where all the action happens. Let's create our AngularJS file first.

对于本教程，我们将需要2个文件。index.html和app.jsapp.js将保存我们所有的Angular代码（不会太多），而index.html将是所有操作发生的地方。让我们首先创建我们的AngularJS文件。

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

All we do in this file is set up our Angular application. We will also create a controller and an object to hold all of our form data.

我们在此文件中所做的全部工作就是设置Angular应用程序。我们还将创建一个控制器和一个对象来保存我们所有的表单数据。

Now let's look at ourindex.htmlfile where we will create our form and do all of our data binding. We'll be using Bootstrap to help speed up our stylings.

现在，让我们看一下我们的index.html文件，在该文件中我们将创建表单并进行所有数据绑定。我们将使用Bootstrap来帮助加快样式。

<-- index.html --><!DOCTYPE html><html><head><link rel="stylesheet" href="///bootstrap/3.1.1/css/bootstrap.min.css"><style>body { padding-top:50px; }form { margin-bottom:50px; }</style><script src="/1.2.13/angular.js"></script><script src="app.js"></script></head><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><div class="form-group"><label>Name</label><input type="text" class="form-control" name="name" ng-model="formData.name"></div><button type="submit" class="btn btn-danger btn-lg">Send Away!</button></form><h2>Sample Form Object</h2><pre>{{ formData }}</pre></div></body></html>

With this setup, we will now have our form ready to go with anameinput. If all went according to plan, if you type into that name input, you should see your data populate in the<pre>tag below.

通过此设置，我们现在准备好使用name输入的表单。如果一切都按计划进行，那么如果您输入该名称输入，则应该在下面的<pre>标记中看到您的数据。

选框 (Checkboxes)

Checkboxes are extremely common in any form. Let's look at how Angular binds their data usingngModel. When there are many checkboxes, sometimes it can be confusing to now how to handle that data when binding it to an object.

复选框以任何形式极为常见。让我们看看Angular如何使用ngModel绑定数据。当复选框很多时，有时将它绑定到对象时如何处理该数据可能会造成混乱。

Inside of theformDataobject we created, we will create another object. Let's call this onefavoriteColorsand ask our user what their favorite colors are.

在我们创建的formData对象内部，我们将创建另一个对象。让我们将此称为“favoriteColors喜欢的颜色”，并询问我们的用户他们最喜欢的颜色是什么。

...<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 a user clicks on one of the checkboxes, they will see that theformDataobject immediately changes. We are housing the values for our checkboxes in theformData.favoriteColorsobject and this is how we will pass data of our checkboxes to our server.

当用户单击其中一个复选框时，他们将看到formData对象立即更改。我们将复选框的值保存在formData.favoriteColors对象中，这就是将复选框的数据传递到服务器的方式。

处理复选框的更改单击 (Processing a Change on Checkbox Click)

Sometimes you will need to process something when somebody clicks a checkbox. This could be something like doing a calculation, changing some variables, or whatever data-binding things you need to do. To do this, you would create a function inside ofapp.jsusing$scope.yourFunction = function() {};. Then you would useng-click="yourFunction()"on your checkbox to call that function.

有时，当有人单击复选框时，您将需要处理某些事情。这可能类似于进行计算，更改某些变量或需要执行的任何数据绑定操作。为此，您可以使用$scope.yourFunction = function() {};在app.js内部创建一个函数$scope.yourFunction = function() {};。然后，您可以在复选框上使用ng-click="yourFunction()"来调用该函数。

There are many different uses for this in forms and Angular provides a very easy way to call custom functions usingng-click.

表单中有许多不同的用法，Angular提供了一种非常简单的方法来使用ng-click调用自定义函数。

复选框的自定义值 (Custom Values for Checkboxes)

By default, bound checkboxes will returntrueorfalse. Sometimes we want to return different values. Angular provides a great way to do this usingng-true-valueandng-false-value.

默认情况下，绑定的复选框将返回true或false。有时我们想返回不同的值。 Angular提供了一种使用ng-true-value和ng-false-value做到这一点的好方法。

Let's add another set of checkboxes, but this time, instead oftrueorfalse, we will use custom values.

让我们添加另一组复选框，但是这次，我们将使用自定义值，而不是true或false。

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

With this addition, we now have anawesomevariable in our formData object. If this is set to true, the value will beofCourseand if set to false, the value will beiWish.

有了这个添加，我们现在在formData对象中有了一个awesome变量。如果将其设置为true，则该值将为ofCourse；如果将其设置为false，则该值将为iWish。

复选框用法 (Checkbox Usage)

Per the official docs, here are the different things you are able to do with radio buttons:

根据官方文档，这是您可以使用单选按钮执行的不同操作：

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

For more information on the things you can do with checkboxes, read the Angular input[checkbox] docs.

有关您可以使用复选框进行操作的更多信息，请阅读Angular input [checkbox] docs 。

单选按钮 (Radio Buttons)

Radio buttons are a little bit easier than checkboxes since we don't have to store multiple values. A radio button will just be one value since you can only select one thing. Let's add in radio boxes and see how they are data-bound.

单选按钮比复选框要容易一些，因为我们不必存储多个值。单选按钮将只是一个值，因为您只能选择一项。让我们添加单选框，看看它们是如何绑定数据的。

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

Just like that, our radio buttons are now bound to ourformDataobject.

就像这样，我们的单选按钮现在绑定到我们的formData对象。

单选按钮的用法 (Radio Button Usage)

Per the official docs, here are the different things you are able to do with radio buttons:

根据官方文档，这是您可以使用单选按钮执行的不同操作：

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

For more information on the things you can do with radio buttons, read the Angular input[radio] docs.

有关单选按钮可以执行的操作的更多信息，请阅读Angular input [radio] docs 。

结论 (Conclusion)

As you can see, binding checkboxes and radio buttons using Angular is a fairly easy process. There is also a lot of flexibility when you want to change parts of your application or create specialized checkbox or radio buttons.

如您所见，使用Angular绑定复选框和单选按钮是一个相当简单的过程。当您想要更改应用程序的部分或创建专门的复选框或单选按钮时，还具有很大的灵活性。

AngularJS Forms series.AngularJS Forms系列的一部分。Submitting AJAX Forms: The AngularJS Way 提交AJAX表单：AngularJS方式 AngularJS Form Validation AngularJS表单验证 Handling Checkboxes and Radio Buttons in Angular Forms (this article) 处理角形形式的复选框和单选按钮（本文）