转行学开发，代码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. vue点击出现蒙版

      需求: 1.点击一个事件时弹出一个蒙版: 2.蒙版上有取消,删除事件:(点击取消时候蒙版消失,点击删除时,删除蒙版并消失): 3.点击空白地方,蒙版也消失:   <template> ...

  2. 字符串的 Base64 加密和解密

    base64加密: FORM encode_base64 USING p_business “字符串string CHANGING p_base64. DATA l_xstring TYPE xstr ...

  3. 初探 -5 JavaScript 语法

    JavaScript 是一个程序语言.语法规则定义了语言结构. JavaScript 语法 JavaScript 是一个脚本语言. 它是一个轻量级,但功能强大的编程语言. JavaScript 字面量 ...

  4. Linux安装FastDFS~Nginx~

    确保Linux联网,我这里使用的是CentOS7操作,联网教程 https://www.cnblogs.com/taopanfeng/p/10978752.html 先把指定的四个文件放入指定目录 安 ...

  5. 机器学习聚类算法之DBSCAN

    一.概念 DBSCAN是一种基于密度的聚类算法,DBSCAN需要两个参数,一个是以P为中心的邻域半径:另一个是以P为中心的邻域内的最低门限点的数量,即密度. 优点: 1.不需要提前设定分类簇数量,分类 ...

  6. php:页面乱码的解决方法

    在 <?php header("Content-Type:text/html;charset=utf-8"); ////设置页面显示的文字编码 头部就写header函数处理成 ...

  7. 【串线篇】SpringBoot数据访问【数据源/mybatis/指定映射文件位置】

    一.配置数据源 1.1.jdbc版本 JDBC(.tomcat.jdbc.pool.DataSource作为数据源) <?xml version="1.0" encoding ...

  8. 5G技术被夸大？专家来测试一下

    像大多数新技术一样,5G也带来了大量媒体宣传.这种炒作中有些伴随着事实的严重扭曲和5G技术实际功能的放大.但是,有一个普遍共识的说法是5G将实现“极速”,换句话说,与前几代产品相比,带宽要高得多. 这 ...

  9. Python实例31[批量对目录下文件重命名]

    经常会遇到下载的文件或电子书,名字中间都包含了一些网址信息,实际使用中由于名字太长不方便,下面的脚本使用正则表达式来对目录下的所有文件重命名:例如: 修改前:[大家网]Mac OS X for Uni ...

  10. requests 模块例题示范

    requests 模块 re模块和requests模块结合示范实例 .*? 不加圆括号表示在要匹配里面的内容不要: (.*?)表示在要匹配的两者之间的内容都要: import requests imp ...