转行学开发，代码100天——2018-05-23

今天学习angularJS的过滤器的使用。

angular中的常用过滤器用来修改数据格式，主要有以下几类：

1.大写，| uppercase

2.小写，| lowercase

3.货币，| currency（美元）

4.排序，| orderBy:'marks' (按分数排序)

5.过滤器，| filter:subjectName

angularJS使用案例：
<!DOCTYPE html>

<html>

<head>

    <title>angularJS 过滤器</title>

    <script type="text/javascript" src="js/angular.min.js"></script>

        <script type="text/javascript">

        angular.module("myApp",[]).controller("studentController",function($scope){

            $scope.student ={

                firstName:'allen',

                lastName:'chen',

                fees:200,

                subjects:[

                {name:'Physics',marks:70},

                {name:'Chemistry',marks:85},

                {name:'Math',marks:90},

                {name:'Chinese',marks:89}

                ],

                fullName:function(){

                    var StudentObject;

                    StudentObject = $scope.student;

                    return StudentObject.firstName+" "+StudentObject.lastName;

                }

            };

        });

    </script>

</head>

<body ng-app="myApp">

    <h2>Angular JS Filters</h2>

    <div  ng-controller="studentController">

        <table border="0">

            <tr><td>First Name:</td><td><input type="text" name="" ng-model="student.firstName"></td></tr>

            <tr><td>Last Name:</td><td><input type="text" name="" ng-model="student.lastName"></td></tr>

            <tr><td>fees:</td><td><input type="text" name="" ng-model="student.fees"></td></tr>

            <tr><td>subject:</td><td><input type="text" name="" ng-model="subjectName"></td></tr>

        </table>

        <br/>

        <table border="0">

            <tr><td>Name in Upper Case:</td><td>{{student.fullName()|uppercase}}</td></tr>

            <tr><td>Name in Lower Case</td><td>{{student.fullName()|lowercase}}</td></tr>

            <tr><td>fees:</td><td>{{student.fees|currency}}</td></tr>

            <tr><td>subject:</td><td>

                <ul>

                    <li ng-repeat="subject in student.subjects|filter:subjectName|orderBy:'marks'">{{subject.name+',marks:'+subject.marks}}</li>

                </ul>

            </td></tr>

        </table>

    </div>

</body>

</html>

 

day68—angularJS学习笔记之-过滤器的更多相关文章

  1. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  2. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  3. AngularJs学习笔记--I18n/L10n

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...

  4. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  7. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  8. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  9. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

随机推荐

  1. 响应式前端框架Bootstrap系列（11）分页

    分页功能已经封装成一个独立的js文件,也是用bs完成的,名称为bootstrap-paginator.js. 使用前先导入文件 : <script src="../libs/boots ...

  2. json字符串和json对象

    在对接口的时候,需要对某些地方进行字符串拼接的操作 现在我需要的是让图表中只默认显示前三条数据, 我的思路是先循环取出来三条外的公司名字 //声明前三个公司之外的公司数组 var selectcomp ...

  3. C语言：标准IO_fopen( )、fclose() ①

    思前想后一个月,我终于敲下了我的第一篇开山之作. 博客千千万,我的博客首先记录的是学习时候的理解,用于给自己翻阅查找,现在主要研究的是C语言和STM32.如果能帮到你,那是最好的,假如我写的东西有错误 ...

  4. memcached和redis的区别

    memcache和redis区别 memcach简介 Memcache时一个内存对象缓存系统,用于加速动态web应用程序,减轻数据库负载.它可以应对任意多个连接,使用非阻塞的网络I/O, 工作机制: ...

  5. python 重学

    -------------------------

  6. Vue基础第一章

    Vue的简单示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. JSP 和Servlet 有有什么关系？

    Servlet是一个特殊的Java程序,它运行于服务器的JVM中,能够依靠服务器的支持向浏览器提供显示内容. JSP本质上是Servlet的一种简易形式, JSP会被服务器处理成一个类似于Servle ...

  8. Jenkins打包Maven项目

    Jenkins是一个用于持续集成的服务,简单些说,就是提交代码后,点一下(也可以设置自动检测),系统会自动下载你的代码并编译,然后复制或上传到指定位置,并给所有相关人发送邮件. 一.环境搭建 1.下载 ...

  9. 【NOIP2017提高组模拟12.24】B

    题目 现在你有N个数,分别为A1,A2,-,AN,现在有M组询问需要你回答.每个询问将会给你一个L和R(L<=R),保证Max{Ai}-Min{Ai}<=R-L,你需要找出并输出最小的K( ...

  10. 【NOIP2016提高A组五校联考1】挖金矿

    题目 分析 我们二分答案 设\(sum_{i,j}\)表示的i列前个数的和, 假设当前出的二分答案为x,第i列挖了\(h_j\)层,则 \[\dfrac{\sum_{i=1}^{n}sum_{i,h_ ...