AngularJS 五 过滤器及验证
2024-08-25 15:27:08
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类将被应用。
最新文章
- 纯html、css3、js的时钟
- 笔试常考的Linux命令大全
- Linux搭建QT环境笔记
- advance 模板 怎么生成module
- 再探Linux动态链接 -- 关于动态库的基础知识
- uva 484 - The Department of Redundancy Department
- VSTO学习笔记(七)基于WPF的Excel分析、转换小程序
- Gradle学习笔记之Groovy
- Execution default of goal org.springframework.boot:spring-boot-maven-plugin:1.5.6.RELEASE:repackage failed: Unable to find main class
- PHP 针对多用户 实现头像更换
- 初学python之路-day07-字符编码
- Invoker-n颜色涂m个珠子的项链
- JavaScript的Let用法
- 有关 Windows 10 中&ldquo;适用于 Linux 的 Windows 子系统(Beta)&rdquo;
- jQuery缓存机制(三)
- nginx服务相关操作
- RTX——第17章 定时器组
- .net垃圾回收
- 线程之 CPthon中的GIL与Lock的分析与解决办法
- ADO.Net事务处理