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. mongodb insert()、save()的区别

    mongodb 的 insert().save()  ,区别主要是:若存在主键,insert()  不做操作,而save() 则更改原来的内容为新内容. 存在数据:  { _id : 1, " ...

  2. Oracle 数据类型详解

    数据类型(datatype)是列(column)或存储过程中的一个属性. Oracle支持的数据类型可以分为三个基本种类:字符数据类型.数字数据类型以及表示其它数据的数据类型. 字符数据类型 CHAR ...

  3. 【linux相识相知】sed命令

    在之前的博客中我们介绍了文本三剑客中grep,本次博客就另外一名剑客——sed做出详细的描述,sed真的是一款强大的工具.下面让我们来一起看一下吧! 概述和工作机制 SED的英文全称为Stream E ...

  4. 求大神帮忙解决一下c#winfrom bindingNavigatorPositionItem加载直接跳转问题

    c# winfrom bindingNavigatorPositionItem控件问题加载直接跳转到相对应的行的问题

  5. Hashtable(哈希表)

    简体字繁体字转化: class Program { static void Main(string[] args) { Hashtable ht = new Hashtable(); ; i < ...

  6. 设备信息工具pv-jd快速上手

    pv-jd 这是一个判断设备信息的小工具,可以判断出移动端还是PC端,提供了多种API 快速开始 安装npm install pv-jd -S 示例 import {judgeDevice, judg ...

  7. 小米3 无法显示日志 Logcat

    需要ROOT权限 1. 使用文件浏览器进入  /system/etc/init.d/  目录 2.使用文本编辑器打开里面的  01Supertweak 这个文件 在最下面找到   rm /dev/lo ...

  8. SQL Server 与 ADO.NET 数据类型映射

    SQL Server 数据类型映射 .NET Framework 4.5 SQL Server 和 .NET Framework 基于不同的类型系统. 例如,.NET Framework Decima ...

  9. network embedding 需读论文

    Must-read papers on NRL/NE. github: https://github.com/nate-russell/Network-Embedding-Resources NRL: ...

  10. mybatis3 step by step 快速上手

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...