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 五 过滤器及验证的更多相关文章

  1. AngularJS入门之数据验证

    AngularJS自带了对表单或控件的输入数据进行验证的功能,对于Html5的基础控件均有内建的验证器,以下列举了所有支持的验证类型: email max maxlength min minlengt ...

  2. 基于angularJS的表单验证练习

    今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...

  3. AngularJS中的身份验证

    欢迎大家指导与讨论 : )  一.  身份验证的意义  首先呢,网络应用的身份验证的意图在于:保护网站中的重要资源.基于某些原因这些资源并不能公开,比如付费资源(交过钱的用户才能上的网络课程),或者一 ...

  4. AngularJS 表单数据验证及错误信息提示

    一.表单验证基本原理 表单验证包括两个主题: 定义验证规则,验证数据有效性. 显示验证结果,把验证结果以友好的方式显示给用户. H5内置一些验证功能,并会显示内置的错误提示信息,先要禁用它,在< ...

  5. angularjs的表单验证

    angularjs内置了常用的表单验证指令,比如min,require等.下面是演示: <!DOCTYPE html> <html> <head> <meta ...

  6. AngularJS学习之输入验证

    1.AngularJS可以验证表单和控件可以验证输入的数据: 2.输入验证:客户端不能确保用户输入数据的安全,所以服务器端的数据验证也是必须的: 3.应用实例: <! DOCTYPE html& ...

  7. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  8. AngularJS开发指南13：AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  9. 夺命雷公狗—angularjs—3—表单验证的高级用法

    其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...

随机推荐

  1. 绘图神器-matplotlib入门

    这次,让我们使用一个非常有名且十分有趣的玩意儿来完成今天的任务,它就是jupyter. 一.安装jupyter matplotlib入门之前,先安装好jupyter.这里只提供最为方便快捷的安装方式: ...

  2. 【坑】自动化测试之Excel表格

    参考一位大神的博客项目架构,把元素和数据都参数化,但是总是被excel表格坑 1.无法下拉 动作列通过下拉列表来控制,点击下拉列表无反应 解决方案:不知道是不是中间动了什么,因为Excel版本的问题, ...

  3. 【C#.NET】Http Handler 介绍---(转)

    Http Handler 介绍 引言 在 Part.1 Http请求处理流程 一文中,我们了解了Http请求的处理过程以及其它一些运作原理.我们知道Http管道中有两个可用接口,一个是IHttpHan ...

  4. 浅谈C#中HttpWebRequest与HttpWebResponse的使用方法

    1.第一招,根据URL地址获取网页信息get方法 public static string GetUrltoHtml(string Url,string type) { try { System.Ne ...

  5. navicat 12 破解

    一.安装 官方下载下载 http://www.navicat.com.cn/download/navicat-premium 二.安装完后下载破解文件 https://pan.baidu.com/s/ ...

  6. Menu 的key dispatch

    DecorView

  7. HDU 1003 最大连续和

    http://www.acmerblog.com/hdu-1003-Max-Sum-1258.html 这里难点只有求起始位置,把握状态变化就行.一般这种子序列问题,都可以用dp简化 #include ...

  8. composer 实用总结

    1.在windows 下配置php环境变量 我电脑------右键属性-----高级系统设置-----环境变量---点击path----添加php.exe路径到环境变量 C:\phpStudy\php ...

  9. C++中 结构体和类的异同

    在C++中,结构体是一种特殊形态的类. 结构体和类的唯一区别就是:  结构体和类具有不同的默认访问控制属性. 类中,对于未指定访问控制属性的成员,其访问控制属性为私有类型(private) 结构体中, ...

  10. 【阿里云产品公测】性能测试服务PTS初体验

    作者:阿里云用户装甲兵 第一步,在九大产品免费公测 页面,点击性能测试服务PTS的申请公测按钮: 点击申请公测后,正确填写个人信息,免费申请性能测试服务PTS: 填写完成后,点击申请提交,耐心等待,一 ...