过滤器
Wscats opened this issue · comments
自定义过滤器
我们可以使用filter函数自定义一个过滤器，filter函数的第一个参数是过滤器到时候再DOM中要使用的名字，第二个参数是定义一个执行过滤操作的函数，返回的要是一个函数
app.filter("wsscat",function(){
var func = function(input, bool){
var out;
console.log(input);
console.log(bool);
}
return func;
})
我们就可以在DOM中使用这个过滤器，这里执行的时候会输出text的值，过滤器中的返回函数第一个参数就是我们传进去的text值，第二个参数是传递一个值，可以是布尔值，字符串，数字等等
<p>{{text|wsscat}}</p>
<p>{{text|wsscat:true}}</p>
所以打印的结果为
console.log(input);//text的值
console.log(bool);//true
在控制器中使用过滤器服务
往控制器中注入$filter服务
$filter(过滤器名字)(需要被过滤的参数,过滤器设置的参数)
app.controller('filterCtrl',function($scope,$filter){
$scope.name = 'wsscat';
//$filter第一个括号是过滤器的名字 第二个括号是接受过滤的参数和过滤器设置的参数
$scope.price = $filter("currency")(123,'#');
$scope.date = $filter("date")(new Date(),'yyyy-MM-dd hh:mm:ss');
})
自定义过滤器，根据输入的关键词，全文搜索，如果有对应的结果那就让它变成红色背景
<!DOCTYPE html>
<html ng-app="wsscat">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="angular.js"></script>
<body ng-controller="filterCtrl">
<input ng-model="red" ng-keyup="makeRed()" />
<div ng-bind-html="htmlSced"></div>
</body>
<script>
var app = angular.module('wsscat', []);
app.controller('filterCtrl', function($scope, $filter, $sce) {
var html = "<p>123</p>";
//刚进入时候显示的DOM结构
$scope.htmlSced = $sce.trustAsHtml(html)
$scope.makeRed = function() {
$scope.html = $filter("wsscat")(html, $scope.red);
$scope.htmlSced = $sce.trustAsHtml($scope.html);
//如果没有任何输入就变成原来的DOM结构
if(!$scope.htmlSced) {
$scope.htmlSced = $sce.trustAsHtml(html)
}
}
})
app.filter("wsscat", function() {
var func = function(input, val) {
//判断筛选结果是否为空
if(val) {
var output;
//把字符串<p>123</p>根据1的位置，拆分成["<p>", "23</p>"]
str = input.split(val);
//把1添加红色的背景色
var addRed = '<span style="background-color:red">' + val + '</span>';
//将1插回DOM中，生成一个新的DOM结构
output = str.join(addRed)
return output;
}
}
return func;
})
</script>
</html>