angular指令深度学习篇
2016-12-28 02:02
246 查看
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实现递归指令 - Tree View
- [angular]指令之5controller
- Angular 几篇关于指令的好文章收录(二)
- 【angular】指令及数据绑定入门
- angular 指令中绑定父 scope 的方法
- angular2内置指令
- AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
- angular中的指令
- 关于angular的include指令,include的页面无法加载js问题解决
- angular.js中指令compile与link原理剖析
- angular学习整理(二)---指令
- angular评论星级指令
- Angular2组件与指令的小实践——实现一个图片轮播组件
- angular-file-upload 封装为指令获取图片高宽
- 常用指令 参考《鸟哥的Linux私房菜+基础学习篇 第三版》
- Angular快速入门3--指令
- 第215天:Angular---指令
- AngularJS ng-model 指令
- Vue.js vs React vs Angular 深度对比
- Angular学习(十六)——用指令修改DOM/校验用户输入