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>