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

culiu9261

于 2020-07-18 17:31:03 发布

阅读量216

点赞数

文章标签： python java js vue javascript ViewUI

原文链接：https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms

版权

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.html and app.js. app.js will hold all of our Angular code (it won't be much) and index.html will be where all the action happens. Let's create our AngularJS file first.

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

// app.js

var 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 our index.html file 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>

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

With this setup, we will now have our form ready to go with a name input. 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 using ngModel. 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 the formData object we created, we will create another object. Let's call this one favoriteColors and ask our user what their favorite colors are.

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

...

    <!-- 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 a user clicks on one of the checkboxes, they will see that the formData object immediately changes. We are housing the values for our checkboxes in the formData.favoriteColors object 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 of app.js using $scope.yourFunction = function() {};. Then you would use ng-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 using ng-click.

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

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

By default, bound checkboxes will return true or false. Sometimes we want to return different values. Angular provides a great way to do this using ng-true-value and ng-false-value.

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

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

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

...

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

...

With this addition, we now have an awesome variable in our formData object. If this is set to true, the value will be ofCourse and if set to false, the value will be iWish.

有了这个添加，我们现在在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.

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

...

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

...

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

就像这样，我们的单选按钮现在绑定到我们的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系列的一部分。