`

在AngularJS应用中处理单选框和复选框

angularjavaScript 
阅读更多

        AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候，实质上它在帮我们进行表单处理。
        今天，我们将快速浏览一下AngularJS是如何对表单中的复选框和单选按钮进行处理的。
        使用复选框的的例子有很多，同时我们对它们的处理方式也有很多。这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法。

一.创建Angular表单

        在这篇文章里，我们需要两个文件：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 = {};
        
        $scope.formData.chickenEgg = 'egg';
        
        $scope.formData.favoriteColors = {red: true, blue: false, green: true};
         
    });

        在这个文件里，我们所做的就是创建Angular应用。其中我们还创建了一个控制器和一个用来保存所有表单数据的对象。
        下面我们看看index.html文件，在这个文件里，我们创建了表单，然后进行了数据绑定。我们使用了Bootstrap快速地对页面进行布局。

<!DOCTYPE html>
<html>
<head>
    <!-- CSS -->
    <!-- load up bootstrap and add some spacing -->
    <link rel="stylesheet" href="bootstrap3.1.1.css">
    <style>
        body         { padding-top:50px; }
        form            { margin-bottom:50px; }
    </style>
 
    <!-- JS -->
    <!-- load up angular and our custom script -->
    <script src="angular1.2.13.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>

        创建完成之后，我们就有了具有name输入的表单了。如果一切都按照我们设想的运行，那么如果你在name输入中键入内容，那么你应当可在下面的<pre>标签段看到所输入的内容了。

 

二.复选框

        在表单里，复选框非常普遍。下面我们将看看Angular是怎样使用ngModel实现数据绑定的。如果有许多复选框，那么有时在把它绑定到对象的时候如何进行数据处理会让人不知所措。
        在我们创建的formData对象的内部，我们还创建了另一个对象。我们把它称为favoriteColors，它请求用户选择最喜欢的颜色：

<!DOCTYPE html>
<html>
<head>
 
    <!-- CSS -->
    <!-- load up bootstrap and add some spacing -->
    <link rel="stylesheet" href="bootstrap3.1.1.css">
    <style>
        body         { padding-top:50px; }
        form            { margin-bottom:50px; }
    </style>
 
    <!-- JS -->
    <!-- load up angular and our custom script -->
    <script src="angular1.2.13.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">
    <!-- 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>
		<!-- SHOW OFF OUR FORMDATA OBJECT -->
    <h2>formData.favoriteColors</h2>
    <pre>
        {{ formData.favoriteColors }}
    </pre>
</div>
</body>
</html>

        当用户点击上面复选框中的任意一个时，他们立刻看到formData对象发生了变更。我们把复选框的值存储到fromData.favoriteColors对象里。这样我们就把复选框的值传递给了服务器了。


复选框点击处理

        有时候，当某人点击了复选框后，你需要对其进行处理。你需要做的处理可能如下：计算某个值，更改某些变量或者进行数据绑定。要实现这些，你要使用$scope.yourFunction = function() {};在app.js内创建函数。接着你就可以在的的复选框上使用ng-click="yourFunction()"来调用这个函数了。
        处理表单复选框的方法有许多种，Angular提供了一个非常简单的方法：使用ng-click调用用户自定义的函数。

自定义复选框对应的值

        默认情况下，绑定到复选框上的值是ture或者false。有时候，我们希望返回的其它值。Angular提供了一种非常好的处理方式：使用ng-ture-value和ng-false-value。
        我们添加另外一组复选框，不过这时侯我们使用的不再是true或者false，而是用户自定义的值。

<!DOCTYPE html>
<html>
<head>
    <!-- CSS -->
    <!-- load up bootstrap and add some spacing -->
    <link rel="stylesheet" href="bootstrap3.1.1.css">
    <style>
        body         { padding-top:50px; }
        form            { margin-bottom:50px; }
    </style>
 
    <!-- JS -->
    <!-- load up angular and our custom script -->
    <script src="angular1.2.13.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">
		<!-- 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>
		<!-- SHOW OFF OUR FORMDATA OBJECT -->
    <h2>formData.awesome</h2>
    <pre>
        {{ formData.awesome }}
    </pre>
</div>
</body>
</html>

        另外，现在我们还在formData对象里增加了一个awesome变量。如果此时设置这个值为true，那么返回的值应该是ofCourse，如果设置为false，那么返回的值为iWish。


复选框

依据官方说明文档，这是和单选框不同之处：

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

        需要了解更多有关复选框的信息，请关注Angular 复选框说明文档.

 

三.单选按钮

        单选按钮比复选框容易些，就在于无需存储多选项数据。单选就是一个值，下面添加一个单选按钮看看。

<!DOCTYPE html>
<html>
<head>
    <!-- CSS -->
    <!-- load up bootstrap and add some spacing -->
    <link rel="stylesheet" href="bootstrap3.1.1.css">
    <style>
        body         { padding-top:50px; }
        form            { margin-bottom:50px; }
    </style>
 
    <!-- JS -->
    <!-- load up angular and our custom script -->
    <script src="angular1.2.13.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">
		<!-- 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>
		<!-- SHOW OFF OUR FORMDATA OBJECT -->
    <h2>formData.chickenEgg</h2>
    <pre>
        {{ formData.chickenEgg }}
    </pre>
</div>
</body>
</html>

        就像这样，单选按钮就绑定到数据对象了。

单选按钮用法

        据官方文档，这是提供的选项：

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

        更多内容，请阅读Angular单选按钮文档。

 

四.小结
        正如你所见，使用Angular绑定复选框和单选按钮都是十分简单的，在创建更具个性的复选框或是单选按钮时，它也有很大的灵活性。

 

文章来源：http://www.oschina.net/translate/handling-checkboxes-and-radio-buttons-in-angular-forms

  • 大小: 8.3 KB
  • 大小: 4.3 KB
  • 大小: 3 KB
分享到：
| 使用DefaultAdvisorAutoProxyCreator实现sp ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics