在新的项目中巧妙地接触到了Google提供的前端MVC框架 AngularJS,它的数据双向绑定真的能够让前端开发者从繁复的DOM操作中解放出来。
在我断断续续的学习AngularJS一个多月后,可以来讲讲我的 AngularJS 学习笔记了,当前首先要讲的是前端必不可少的元素——表单,以下用ng代替AngularJS,本文章适合有一定ng基础的同学。
Demo页面我使用Bootstrap3.2.0作为前端显示框架,同时引入了jQuery1.11.1,AngularJS 为刚刚新发布的1.2.25(使用1.3.0-rc2出现了一个奇怪的BUG,看来还是稳定版稳定),首先来一个大而全的表单页面:
<div class="row" ng-controller="myCtrl">
<div class="col-sm-6">
<form name="myForm" autocomplete="off" ng-submit="doSubmit()" novalidate>
<fieldset>
<legend>My AngularJS Form</legend>
<div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.username.$invalid}">
<label for="username"><code>*</code>用户名称</label>
<!---->
<input type="text" class="form-control" name="username" ng-model="formArgs.username" ng-minlength="5" ng-maxlength="30" required>
<!---->
<span class="help-block" ng-show="myForm.submitted && myForm.username.$error.required">请输入5-30个字符的用户名称!</span>
<!---->
<span class="help-block" ng-show="myForm.submitted && myForm.username.$error.minlength">输入的用户名必须在5至30个字符之间!</span>
<!---->
<span class="help-block" ng-show="myForm.submitted && myForm.username.$error.remoted">输入的用户名称已经被使用!</span>
</div>
<div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.userEmail.$invalid}">
<label for="userEmail"><code>*</code>用户邮箱</label>
<!---->
<input type="email" class="form-control" name="userEmail" ng-model="formArgs.userEmail" maxlength="30" required>
<!---->
<span class="help-block" ng-show="myForm.submitted && myForm.userEmail.$error.required">请输入您常用的电子邮箱!</span>
<!---->
<span class="help-block" ng-show="myForm.submitted && myForm.userEmail.$error.email">输入的电子邮箱地址有误!</span>
</div>
<div class="form-group" ng-class="{'has-error':myForm.submitted && myForm.password.$invalid}">
<label for="password"><code>*</code>用户密码</label>
<!---->
<input type="password" class="form-control" name="password" ng-model="formArgs.password" ng-minlength="8" ng-maxlength="30" required>
<!---->
<span class="help-block" ng-show="myForm.submitted && myForm.password.$error.required">请输入8-30个字符的用户密码!</span>
<!---->
<span class="help-block" ng-show="myForm.submitted && myForm.password.$err