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 ...
随机推荐
- iOS 学习 - 18.TextField 自定义菜单事件，复制和微信分享
菜单事件包括,剪切.拷贝.全选.分享...,此 demo 只有 copy.share 1.定义 field 继承与 UITextField - (BOOL)canPerformAction:(SEL) ...
- jquery数组删除指定元素的方法:grep()
jquery数组删除指定元素的方法:grep() 金刚 数组 jquery javascript 元素 遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样 ...
- Create view failed with ORA-01031:insufficient privileges
有时候在ORACLE数据库创建视图时会遇到:ORA-01031:insufficient privileges错误,我也多次碰到了各种创建视图出错的情况,很多时候也没有太在意,今天被一同事问起这个问题 ...
- ORA-01012: not logged on
关于ORA-01012这个错误,惜分飞的博客ORA-01012: not logged on里面已经做了一些介绍,原因就不多说了,看看他的描述说明: 现象说明: 1)终于发现了ORA-01012错误, ...
- SQL SERVER 2012启动失败 because upgrade step 'SSIS_hotfix_install.sql' 失败
有台数据库服务器(开发服务器),开发人员邮件告诉我,SSMS连接不了这台服务器,远程登录后,发现SQL SERVER的服务停止了,启动服务时报错,服务启动不了.检查错误日志发现下面一些信息 2015- ...
- [MySQL性能优化系列]LIMIT语句优化
1. 背景 假设有如下SQL语句: SELECT * FROM table1 LIMIT offset, rows 这是一条典型的LIMIT语句,常见的使用场景是,某些查询返回的内容特别多,而客户端处 ...
- 搭建自己的PHP框架心得（一）
h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理5
我们先直接拷贝下blank.html这个页面的代码,顺带先建立一个Home控制器,并添加Index视图.将代码拷贝进去. <!DOCTYPE html> <html lang=&qu ...
- IE10/11克隆textarea时 bug
重现代码 <!doctype html> <html> <head> <meta charset="UTF-8"> </hea ...
- Mysql错误:Ignoring query to other database解决方法
Mysql错误:Ignoring query to other database解决方法 今天登陆mysql show databases出现Ignoring query to other datab ...