1. angular中的对象

其实也不用多说的,前台是可以提取后台定义的对象的——

 1 <body ng-app="MyApp">
 2     <div ng-controller="User">
 3       <form ng-submit="submit()" novalidate>
 4         <label>Firstname</label>
 5         <input type="text" ng-model="user.firstname"/>
 6         <label>Lastname</label>
 7         <input type="text" ng-model="user.lastname"/>
 8         <label>Age</label>
 9         <input type="text" ng-model="user.age"/>
10         <br>
11         <button class="btn">Submit</button>
12       </form>
13 
14       User Model: {{user}}
15       <br>
16       Form was submitted: {{wasSubmitted}}
17     </div>
18   </body>
 1 var app = angular.module("MyApp", []);
 2 
 3 app.controller("User", function($scope) {
 4   $scope.user = {a:4};
 5   $scope.wasSubmitted = false;
 6 
 7   $scope.submit = function() {
 8     $scope.wasSubmitted = true;
 9   };
10 });

上代码中,可以看到14行的{{user}}成功提取了user对象里的数据,而这个数据是由后台生成,前台的三个ng-model添加的。

 

 

2. 表单验证

 $error

$error对象中保存着没有通过验证的验证器名称以及对应的错误信息。

 $pristine

$pristine的值是布尔型的,可以告诉我们用户是否对控件进行了修改。

 $dirty

$dirty的值和$pristine相反,可以告诉我们用户是否和控件进行过交互。

$valid

$valid值可以告诉我们当前的控件中是否有错误。当有错误时值为false,没有错误时值为true。

$invalid

$invalid值可以告诉我们当前控件中是否存在至少一个错误,它的值和$valid相反。

 

常用的表单验证指令 

1. 必填项验证

某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:

<input type="text" required />  

2. 最小长度

验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}":

<input type="text" ng-minlength="5" /> 

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength="{number}":

<input type="text" ng-maxlength="20" />

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:

<input type="text" ng-pattern="/[a-zA-Z]/" /> 

5. 电子邮件

验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:

<input type="email" name="email" ng-model="user.email" /> 

6. 数字

验证输入内容是否是数字,将input的类型设置为number:

<input type="number" name="age" ng-model="user.age" /> 

7. URL

 验证输入内容是否是URL,将input的类型设置为 url:

 

 

<input type="url" name="homepage" ng-model="user.facebook_url" />
以上内容摘抄自:http://www.cnblogs.com/rohelm/p/4033513.html
作者写的是真心不错,这个页面中还有相当多的实例,不懂的同学可以去看看

 

 

 

 

2. 验证的运用

有了以上内容,我们就可以对表单进行一些简单的设置了。

angular中有个ng-show这个属性,属性值为true的时候,才会显示这个标签,和jquery中的show()非常类似。

于是,我们可以在标签里这么写——

<span class="help-block" ng-show="form.firstname.$invalid && form.firstname.$dirty">Firstname is required</span>

当form表单中,firstname发生更改, form.firstname.$dirty变为true,

当form表单中,firstname发生错误, form.firstname.$invalid变为true,

而两个值都为ture的时候,ng-show才为true,显示出来。

 

于是——当内容发生过了修改,但是内容仍然为空,这个条件触发的时候,上面这个span标签才会显示出来。

 

 

3. 字段的选择

当我们使用表单的时候,有些需要进行一些细节上的操作,例如,有些表单需要不验证,有些需要必填。一般来说,只要在标签后面添加对应属性就可以了——

<input name="firstname" type="text" ng-model="user.firstname" required/>

最后的required代表必填

<form name="form" ng-submit="submit()" class="form-horizontal" novalidate novalidate>

代表表单提交的时候不需要验证