使用AngularJS处理单选框和复选框的简单方法_AngularJS
- WBOY原创
- 2016-05-16 15:53:521165浏览
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 = {};
});
在这个文件里，我们所做的就是创建Angular应用。其中我们还创建了一个控制器和一个用来保存所有表单数据的对象。
下面我们看看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 class="brush:php;toolbar:false">
{{ formData }}
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn