day68—angularJS学习笔记之-过滤器
转行学开发，代码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学习笔记之-过滤器的更多相关文章
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJs学习笔记--I18n/L10n
原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
随机推荐
- npm切换淘宝镜像源
npm 切换到淘宝源地址默认的npm下载地址:http://www.npmjs.org/淘宝npm镜像的地址:https://npm.taobao.org/ 临时使用淘宝源npm --registry ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- 关于 i++ 和 ++ i
先看一下代码,猜想一下输出值 @Testpublic void test() { int i =1; int a,b=0; i++; a=(i++); System.out.println(a); S ...
- iperf测试流量转发（nginx反向代理tcp/udp）
一.准备工作 服务器1:192.168.33.102 搭建nginx服务,作为反向代理的中转站 服务器2:192.168.33.103 nginx要反向代理的服务器 服务器3:192.1 ...
- Uber回馈开源的一些软件
AresDB AresDB 是 Uber 开源的一个基于 GPU 运算的实时分析存储引擎和查询引擎.具备低查询延迟.高数据刷新率和高效内存和磁盘存储管理.AresDB 要求 CUDA Toolkit ...
- IBM小机拆镜像换盘
1.硬盘告警信息 2.故障排查 查看错误日志 # errpt -aj C62E1EB7 查看hdisk0的信息,发现hdisk0属于rootvg # lspv 查看hdi ...
- oracle数据库应用总结
1------->>>>>>>>>>>>>>>>>>>>>>> ...
- YARN组件详细介绍
一.ResourceManager 内部主要有两个组件: 1.Scheduler:这个组件完全是插拔式的,用户可以根据自己的需求实现不同的调度器,目前YARN提供了FIFO.容量以及公平调度器.这个组 ...
- docker 部署springboot项目【转载】
https://www.cnblogs.com/ityouknow/p/8599093.html
- c语言日志打印
#include <stdio.h> #include <stdlib.h> #include <time.h> #include <stdarg.h> ...