AngularJS 五 过滤器及验证
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类将被应用。
AngularJS 五 过滤器及验证的更多相关文章
- AngularJS入门之数据验证
AngularJS自带了对表单或控件的输入数据进行验证的功能,对于Html5的基础控件均有内建的验证器,以下列举了所有支持的验证类型: email max maxlength min minlengt ...
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- AngularJS中的身份验证
欢迎大家指导与讨论 : ) 一. 身份验证的意义 首先呢,网络应用的身份验证的意图在于:保护网站中的重要资源.基于某些原因这些资源并不能公开,比如付费资源(交过钱的用户才能上的网络课程),或者一 ...
- AngularJS 表单数据验证及错误信息提示
一.表单验证基本原理 表单验证包括两个主题: 定义验证规则,验证数据有效性. 显示验证结果,把验证结果以友好的方式显示给用户. H5内置一些验证功能,并会显示内置的错误提示信息,先要禁用它,在< ...
- angularjs的表单验证
angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...
- AngularJS学习之输入验证
1.AngularJS可以验证表单和控件可以验证输入的数据: 2.输入验证:客户端不能确保用户输入数据的安全,所以服务器端的数据验证也是必须的: 3.应用实例: <! DOCTYPE html& ...
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...
- AngularJS开发指南13：AngularJS的过滤器详解
AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...
- 夺命雷公狗—angularjs—3—表单验证的高级用法
其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...
随机推荐
- java线程中的 sleep() wait() yield()
sleep()方法是让线程休眠 可以指定时间 其实就是让线程进入阻塞状态 指定的时间过后 进入就绪状态 不释锁 相当于抱着锁睡觉 wait() 让线程进入等待状态 被唤醒后才会继续执行 ...
- MATLAB中的概率论与数理统计
概率论与数理统计 产生随机数 binornd poissrnd exprnd unidrnd normrnd 概率密度函数(pdf) binopdf poisspdf geopdf unidpdf n ...
- SpringBoot | 第二十八章：监控管理之Spring Boot Admin使用
前言 上一章节,我们介绍了Actuator的使用,知道了可通过访问不同的端点路径,获取相应的监控信息.但使用后也能发现,返回的监控数据都是以JSON串的形式进行返回的,对于实施或者其他人员来说,不是很 ...
- 分页存储过程ROW_NUMBER() over(order by pid desc)
分页存储过程 : create proc usp_GetMyPhotos @pageIndex int, --当前页码 @pageSize int, --每页多少条 @pageCount ...
- small zhishi
\\192.168.1.201\d$\Data 访问远程计算机文件资源管理器
- C#基础知识-数组_ArrayList_List(九)
之前两篇文档讲述了C#中的面向对象的概念,其实这个概念对于很多种语言都是通用的,只不过每种语言具体实现的过程方法不一样,比如Java.C++.python等,这些都是很流行的面向对象的语言在编程语言排 ...
- C#学习基础（1）命名约定
c#语言规范建议使用特定大小写约定创建字标识符 Pascal 大小写 标识符中每个单词的首字母大写 用于类型名和成员名 例如:CarDeck,FirstName Camel 大小写 ...
- MVC3.0与MVC2.0的区别
昨天面试时第一回用MVC2.0做了一个简单的增删改查功能的测试.想一下用了一年多的MVC3.0,对这两个版本不同之处做以下几点总结: 最明显的是MVC3.0较MVC2.0而言,多了Razor视图: 1 ...
- 今天研究Unity Ioc 框架
今天研究Unity Ioc 框架,被自己坑了两个多小时. 运行就报错,反反复复检查了很多次,配置文件,代码都没有问题,也从新写了好几遍. 最后仔细看报错消息才知道,config文件没有生成到目录……… ...
- Nginx集群（负载均衡）
一.集群介绍 1.传统web访问模型 (1)传统web访问模型完成一次请求的步骤 1)用户发起请求 2)服务器接受请求 3)服务器处理请求(压力最大) 4)服务器响应请求 (2)传统模型缺点 单点故障 ...