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. ZOJ 1610——Count the Colors——————【线段树区间替换、求不同颜色区间段数】

    Count the Colors Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Subm ...

  2. 深入理解JavaScript系列（13）：This? Yes,this!

    介绍 在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节.讨论的主题就是this关键字.实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题. 许多程序员习惯的认为,在程序语言中 ...

  3. js面向对象3

    1.this的使用 核心:在js中,this表示当前对象,“谁”调用了当前函数,“this”就指向了“谁” 语法: Function 类(){ this.属性=值; } 例1.在构造器中,使用this ...

  4. setInterval()的三种写法

    前言: setInterval("fun()",time)有两个参数:fun()为要执行的函数:time为多久执行一次函数,单位是毫秒: 我们做一个简单的例子,就是每隔5s弹出一个 ...

  5. OC与JS交互之WebViewJavascriptBridge

    上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...

  6. js简单时分秒倒计时

    效果: javascript: <script type="text/javascript"> function countTime() { //获取当前时间 var ...

  7. for计算位置坐标

    代码1效果图: 代码2效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  8. JavaScript数组求和

    <script> function demo(){ var d=document.getElementsByTagName("input")[0].value.spli ...

  9. c语言进制转化

    #include <stdio.h> // 进制转化 int main(void) { ; ; int i3 = 0x32C; printf( printf( printf("十 ...

  10. Eclipse SWT

    Reference: http://www.eclipse.org/swt/ http://www.functionx.com/win32/Lesson01.htm http://www.win32d ...