angular指令深度学习篇
angular指令深度学习-过滤器
limitTo
...
<body ng-app="app" >
<div ng-controller="myCtr">
{{data|limitTo:2:1}} <!-- 第一个参数表示截取几位，第二个参数表示从第几位截取 -->
...
angular.module("app", [])
.controller("myCtr", ["$scope",function($scope){
$scope.data='中华人名共和国万岁，打倒小日本！';
}])
由上述代码片段不难看出结果：华人。
number
...
{{data|number}} <!-- 将data转化为数字 -->
...
$scope.data = 99.99;
...
currency
...
{{data|currency}} <!-- 将data转化为货币 -->
...
$scope.data = 99.99;
...
lowercase、uppercase
...
{{data|lowercase|uppercase}} <!-- 将data转化为小写后再转化为大写 -->
...
$scope.data = hello kity;
...
date
...
{{time|date:'yyyy-MM-dd HH-mm-ss'}}<!-- 将time时间转化格式 -->
...
$scope.time = new Date().getTime();
...
orderBy
...
{{arr|orderBy:'id':true}} <!-- 将arr数组按照id进行排序，参数true为倒序，默认为false，升序 -->
...
$scope.arr = [
{id:1,name:'刘恺威',title:'飞刀又见飞刀'},
{id:2,name:'王凯',title:'陈乔恩'},
{id:3,name:'张艺谋',title:'长城'}
]
...
filter
...
{{arr|filter:'刘恺威':true}} <!-- 将arr数组中含有'刘恺威'的元素过滤出来，参数true为完全一致过滤，默认为false，不需要完全一致即可实现过滤 -->
...
$scope.arr = [
{id:1,name:'刘恺威',title:'飞刀又见飞刀'},
{id:2,name:'王凯',title:'陈乔恩'},
{id:3,name:'张艺谋',title:'长城'}
]
...
orderBy实例
点击表格标题时，表格内容会根据id|name|title进行排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="app" >
<div ng-controller="myCtr">
<table border='1'>
<tr>
<th ng-click="ol('id')">UID
<span ng-if="!status.id">升序</span>
<span ng-if="status.id">降序</span>
</th>
<th ng-click="ol('name')">name</th>
<th ng-click="ol('title')">title</th>
</tr>
<tr ng-repeat="(k,v) in data">
<td >{{v.id}}</td>
<td >{{v.name}}</td>
<td >{{v.title}}</td>
</tr>
</table>
</div>
<script src="http://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtr", ["$scope","$filter",function($scope,$filter){
$scope.data=[
{id:1,name:'刘恺威',title:'飞刀又见飞刀'},
{id:2,name:'王凯',title:'陈乔恩'},
{id:3,name:'张艺谋',title:'长城'}
];
$scope.status={id:false,name:false,title:false}; //定义一个变量，便于下面使用
$scope.ol = function(filed){
// if(arguments.callee[filed]==undefined){ //callee的作用时定义一个不会释放的变量，功能同上
// arguments.callee[filed]=false;
// }
// arguments.callee[filed]=!arguments.callee[filed];
$scope.status[filed]=!$scope.status[filed]; //通过这个操作，使得每次点击表格内容都会反排序
$scope.arr = $filter('orderBy')($scope.arr,filed,$scope.status[filed]);//第一个括弧里放过滤器，第二个放要过滤的对象、过滤的条件、倒序还是升序
}
}])
</script>
</body>
</html>
自定义过滤器
实现将手机号后面相应位数替换为*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="app" >
<div ng-controller="myCtr">
<table border=1>
<tr>
<th>UID</th>
<th>姓名</th>
<th>电话</th>
</tr>
<tr ng-repeat="(k,v) in data">
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{v.mobile|trucate:3}}</td>
</tr>
</table>
</div>
<script src="http://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtr", ["$scope","$filter",function($scope,$filter){
$scope.data=[
{id:1,name:'刘恺威',mobile:'13590043280'},
{id:2,name:'王凯',mobile:'15920576439'},
{id:3,name:'张艺谋',mobile:'18739025667'}
]
}])
.filter('trucate', function(){
return function(mobile,len){
len = len?len:2;
return mobile.substr(0,6-len)+new String('*').repeat(len);
}
});
</script>
</body>
</html>
angular事件监听$watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="app" >
<div ng-controller="myCtr">
<input type="text" ng-model="title">{{error}}
<input type="text" ng-model="obj.title">{{error1}}
</div>
<script src="http://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtr", ["$scope","$filter",function($scope,$filter){
//监听变量
$scope.title='';
$scope.$watch('title',function(n,o){
$scope.error = n.length>3?'长度不能超过3位':'';//n为用户输入的新数据
})
//监听对象
$scope.obj={title:''};
$scope.$watch('obj',function(n,o){
$scope.error1 = n.title.length>3?'长度不能超过3位':'';
},true) //监听对象时，一定要加true
$scope.list=$scope.arr;
$scope.$watch('search',function(n,o){
$scope.list = $filter('filter')($scope.arr,n);
});
}])
</script>
</body>
</html>
$watch查询案例
通过再搜索框内输入与表格内容匹配的值，过滤出我们想要的项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="app" >
<div ng-controller="myCtr">
搜索：<input type="text" ng-model="search">
<table border=1>
<tr>
<th>UID</th>
<th>姓名</th>
<th>电话</th>
</tr>
<tr ng-repeat="(k,v) in data">
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{v.mobile}}</td>
</tr>
</table>
</div>
<script src="http://cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtr", ["$scope","$filter",function($scope,$filter){
angular.module("app", [])
$scope.data=[
{id:1,name:'刘恺威',mobile:'13590043280'},
{id:2,name:'王凯',mobile:'15920576439'},
{id:3,name:'张艺谋',mobile:'18739025667'}
]
}])
$scope.list=$scope.data;
$scope.$watch('search',function(n,o){
$scope.list = $filter('filter')($scope.arr,n);
});
}])
</script>
</body>
</html>
angular指令深度学习篇的更多相关文章
- 深度学习篇——Tensorflow配置（傻瓜安装模式）
前言 如果你是一个完美主义者,那么请绕过此文,请参考<深度学习篇——Tensorflow配置(完美主义模式)> 安装 pip install tensorflow ok,只要不报错,安装就 ...
- 【深度学习篇】---CNN和RNN结合与对比，实例讲解
一.前述 CNN和RNN几乎占据着深度学习的半壁江山,所以本文将着重讲解CNN+RNN的各种组合方式,以及CNN和RNN的对比. 二.CNN与RNN对比 1.CNN卷积神经网络与RNN递归神经网络直观 ...
- 【深度学习篇】--神经网络中的调优一，超参数调优和Early_Stopping
一.前述 调优对于模型训练速度,准确率方面至关重要,所以本文对神经网络中的调优做一个总结. 二.神经网络超参数调优 1.适当调整隐藏层数对于许多问题,你可以开始只用一个隐藏层,就可以获得不错的结果,比 ...
- 深度学习篇——Tensorflow-GPU配置
tensoflow-gpu安装 对于python 3.5和3.6的童鞋们而言,安装tensorflow其实并不难,因为我们可以通过pip直接安装. 不过,第一要求你安装的python是64位的,如下图 ...
- 【深度学习篇】--Windows 64下tensorflow-gpu安装到应用
一.前述 一直以为自己的笔记本不支持tensflow-gpu的运行,结果每次运行模型都要好久.偶然间一个想法,想试试自己的笔记本,结果竟然神奇的发现能用GPU.于是分享一下安装步骤. 二.具体 因为版 ...
- 【深度学习篇】--神经网络中的池化层和CNN架构模型
一.前述 本文讲述池化层和经典神经网络中的架构模型. 二.池化Pooling 1.目标 降采样subsample,shrink(浓缩),减少计算负荷,减少内存使用,参数数量减少(也可防止过拟合)减少输 ...
- Nginx详解二十三：Nginx深度学习篇之Nginx+Lua开发环境搭建
Nginx+Lua开发环境 1.下载LuaJIT解释器wget http://luajit.org/download/LuaJIT-2.0.2.tar.gztar -zxvf LuaJIT-2.0.2 ...
- 【深度学习篇】--Seq2Seq模型从初识到应用
一.前述 架构: 问题: 1.压缩会损失信息 2.长度会影响准确率 解决办法: Attention机制:聚焦模式 “高分辨率”聚焦在图片的某个特定区域并以“低分辨率”,感知图像的周边区域的模式.通过大 ...
- Nginx详解二十四：Nginx深度学习篇之灰度发布
实战场景 - 灰度发布 灰度发布的作用:按照一定的关系区别,分部分的代码进行上线,使代码的发布能平滑过渡上线实现方式: 1.用户的信息cookie等信息区别 2.根据用户的IP地址 安装memcach ...
随机推荐
- Python绘制PDF文件~超简单的小程序
Python绘制PDF文件 项目简介 这次项目很简单,本次项目课,代码不超过40行,主要是使用 urllib和reportlab模块,来生成一个pdf文件. reportlab官方文档 http:// ...
- 基于物理渲染的渲染器Tiberius计划
既然决定实现一个光栅化软件渲染器,我又萌生了一个念头:实现一个基于物理渲染的渲染器.
- SE_homework1（第一部分）
题目:写一个能自动生成小学四则运算题目的命令行"软件",分别满足下列各种需求.下面这些需求都可以用命令行参数的形式来指定: a.)除了整数以外,还支持真分数的运算.(例如1 ...
- Linux MySQL源码安装缺少ncurses-devel包
在Red Hat Enterprise Linux Server release 5.7 上用源码安装MySQL-5.6.23时,遇到了" remove CMakeCache.txt and ...
- JavaScript 易错知识点整理
本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...
- Cloudera5.8.3 HBase1.2.0开发必须的jar包
Cloudera的HBase开发环境下载依赖包特别麻烦,通常是直接在CDH服务器上拷.
- 帆软报表FineReport数据连接中游标问题解决方案汇总
1. 概念 在数据库中, 游标是一个十分重要的概念.游标是一种能从包括多条数据记录的结果集中,每次提取一条记录的机制. 用SQL语言从数据库中检索数据后,结果放在内存的一块区域中,往往是一个含有多个记 ...
- NIO与AIO，同步/异步，阻塞/非阻塞
1.flip(),compact(),与clear()的使用 flip()内部实现,先将limit设为当前位置,再将缓冲区的postion设为0,所以是为将缓冲区的数据写出到其它通道或者get()作准 ...
- php 获取当前服务器 系统
引子: 今天遇到一个问题,当执行文件操作是,不同系统之间的命令是不同的 , 所以需要判断当前系统. $is_win = strtoupper(substr(PHP_OS,0,3))==='WIN'?1 ...
- 第12章 Java字符串
1.什么是Java中的字符串 字符串String并不是一种数据类型,而是一个类对象,在java.lang包中,只不过在默认情况下java都是自动导入的,所以可以直接使用创建一个String对象的方法有 ...