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多线程之join方法使用
看这篇博客:http://www.cnblogs.com/skywang12345/p/3479275.html
使用SeaJS实现模块化JavaScript开发【转】
前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封 ...
Scala安装及开发环境搭建
最近想学习下scala,为后面转大数据做一些沉淀. 1. 首先保证jdk已经成功安装 2. 去官网下载scala安装程序 http://www.scala-lang.org/download/all. ...
maven pom.xml指定jdk
<plugins>  <plugin> <groupId>org.apache.maven.plugins</grou ...
QQ音乐：React v16 新特性实践
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ音乐技术团队发表于云+社区专栏自从去年9月份 React 团队发布了 v16.0 版本开始,到18年3月刚发布的 v16.3 版 ...
（六-1）Firefox插件安装
1.安装火狐插件 ①旧版本firefox 火狐浏览器右上角-->附件-->获取更多附件-->搜索-->Firebug 安装 Firebug 扩展:https://addons. ...
C# 获取字符串长度
int leng = System.Text.Encoding.Default.GetBytes(attachfileId2).Length;
PLC通信网络
PLC通信网络的分层 PLC通信网络大致可分为3层,管理层,单元层以及现场执行(AS-I)层.如下图所示. 在PLC通信网络的三层架构中,管理层,通信方式包括MPI,工业以太网(Profinet)以及 ...
select支持多查询，获取分页count
在我们使用mybatis 时,当我们根据分页去查询数据集时,需要传入的参数有page(页码)和size(每页的条数),而我们期望获取到的数据有,小于或等于size的list数据集,同时我们还需要得到一 ...
owin解决跨域js请求
最近在用owin打了一个建议的http的api服务,但遇到了js跨域访问的问题,后来在网上找到了答案,已帮助遇到此问题的人 1.首先nuget先按着owin依赖的包,然后至关重要的一步是引用Micro ...

AngularJS 五 过滤器及验证