AngularJS过滤：
AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式。
格式:
一些比较重要的过滤器：
Number
Filter
orderBy：
查询的条件就是根据下拉框来进行过滤的
AngularJS模块：
AngularJS应用程序必须创建一个顶级应用程序模块。
创建应用程序模块
创建控制器模块
AngularJS形式：
AngularJS表单并提交数据。
<head ng-app="studentApp"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>First AngularJS Application</title> <meta charset="utf-8" /> <script src="Scripts/jquery-1.9.1.min.js"></script> <script src="Scripts/angular.min.js"></script> </head> <body ng-controller="studentController"> <h1>学生信息：</h1> <form ng-form="submitStudnetForm()"> <label for="firstName">First Name:</label><br /> <input type="text" id="firstName" ng-model="student.firstName" /><br /> <label for="lastName">Last Name:</label><br /> <input type="text" id="lastName" ng-model="student.lastName" /><br /> <label for="dob">DoB</label><br /> <input type="date" id="dob" ng-model="student.DoB" /> <br /><br /> <label for="gender">Gender</label> <br /> <select id="gender" ng-model="student.gender"> <option value="male">Male</option> <option value="female">Female</option> </select><br /> <br /> <span>Training Type:</span><br /> <label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label><br /> <label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label> <br /><br /> <span>Subjects</span><br /> <label><input type="checkbox" ng-model="student.maths" />Maths</label> <br /> <label><input type="checkbox" ng-model="student.physics" />Physics</label> <br /> <label><input type="checkbox" ng-model="student.chemistry" />Chemistry</label><br /><br /> <input type="submit" value="Submit" /> <input type="reset" ng-click="resetForm()" value="Reset" /> <script> //1.创建模块 var studentApp = angular.module('studentApp', []); //2.创建控制器 studentApp.controller("studentController", function ($scope, $http, $log) { //3. 附加originalStudent类 这个类 $scope.originalStudent = { firstName: 'James', lastName: 'Bond', DoB: new Date('01/31/1980'), gender: 'male', trainingType: 'online', maths: false, physics: true, chemistry: true }; //4.赋值给student $scope.student = angular.copy($scope.originalStudent); //5.当你点提交的时候触发这个事件 $scope.submitStudnetForm = function () { $http.post('TestHandel.ashx', { student: $scope.student }, { headers: { 'Content-Type': 'application/x-wwww-form-urlencoded' }, transformrequest: function (obj) { var str = []; for (var s in obj) { str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s])); } return str.join("&"); } }).then(function () { }); } //6.重置 $scope.resetForm = function () { $scope.student = angular.copy($scope.OriginalStudent); }; }); </script> </form> </body>
AngularJS验证：
效果
在<form>标签中应用novalidate属性。novalidate属性将禁用浏览器的默认验证。
状态属性：
AngularJS验证CSS类：
使用方法：
配合Bootstrap使用：
效果：
①：一开始显示：
②为空
③不为空
在上面的例子中，我们已经使用CSS类名和表达式对每个<div>元素应用了ng-class指令。如果一个表达式的值为true，那么指定的CSS类将被应用。