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. nyoj 409——郁闷的C小加（三）——————【中缀式化前缀后缀并求值】

    郁闷的C小加(三) 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 聪明的你帮助C小加解决了中缀表达式到后缀表达式的转换(详情请参考“郁闷的C小加(一)”),C小加很 ...

  2. [转]NLog Layout Renderers ${}

    https://github.com/nlog/NLog/wiki/Layout-Renderers Layout renderers are template macros that are use ...

  3. bootstrap fileinput+MVC 上传多文件,保存

    新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图: 首先,先在model中定义数据模型: public partial class create { [Requi ...

  4. python学习（六）--正则的一些例子

    import re #正则表达式#compile函数,--将正则表达式转变为内部函数,提高执行效率strr = "python123456"pattern = "Pyth ...

  5. css之margin,padding的百分比

    注意:上下内边距与左右内边距一致:即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度. PS:而且是基于父元素内容的宽度(width属性的大小),不是基于父元素整个框架的宽度

  6. springmvc 全局的异常拦截处理 @ControllerAdvice注解 @ExceptionHandler

    第一步: Dispatcher前端控制器的源码中 默认的 private boolean throwExceptionIfNoHandlerFound = false;说明如果没有找到匹配的执行器,不 ...

  7. Nodejs 如何制作命令行工具

    # 全局安装,安装报错是需要前面加上sudo $ sudo npm install -g xxxb # 输出帮助 $ xxxb -h Usage: xxxb 这里是我私人玩耍的命令哦![options ...

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

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

  9. 卸载Gac里被windows installer所reference的assembly的方法

    HKEY_LOCAL_MACHINE\Software\Classes\Installer\Assemlies\Global下找到要删除的assembly的那一项, 删除. 然后再gacutil /u ...

  10. 转：ArcGIS提取面状道路中心线（转载）

    1.首先把所有的面要素merge成一个要素 2.把merge后的数据转成线数据 3.此时转换后的线数据一定是闭合的,为了防止提取中心线失败(只提取出外围轮廓)我们在随意一个道路末端使用打断工具打一个开 ...