AngularJS 自定义过滤器

最新推荐文章于 2021-08-11 19:45:32 发布

美食花宴

最新推荐文章于 2021-08-11 19:45:32 发布

阅读量289

点赞数

文章标签： angularjs web

本文链接：https://blog.csdn.net/sun0789/article/details/53225310

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义过滤器</title>
</head>
<body ng-app="App">

<div ng-controller="DemoController">
<h4>{{info|capitalize:123}}{{name}}</h4>
</div>

<script src="./libs/angular.min.js"></script>
<script>

var App = angular.module('App', []);

// 自定义过滤器
//除了使用AngularJS内建过滤器外，
// 还可以根业务需要自定义过滤器，
// 通过模块对象实例提供的filter方法自定义过滤器。

//此处capitalize是过滤器的名字，function里的是要实现的过滤规则

App.filter('capitalize', function () {
// console.log(input);

return function (input, arg2) {
// console.log(arg2);
return input[0].toUpperCase() + input.slice(1);

// return input[0].toUpperCase()
// 返回输入的索引值为0字母，把它转化为大写
// input.slice(1);
// 截取从索引值为1开始到结束的所有字母

//1.谁是input？谁调用谁是input
//2.怎么调用？用 | 这个符号调用
//3.怎么分隔参数？用 : 这个符号来分割参数
//eg info|capitalize:123 ====>function fn(capitalize,123){}
// info是调用者
// | 是调用的方法====》相当于函数中的();
// : 相当于function fn(capitalize,123){}中的 , 逗号
// capitalize 是参数1
// 123 是参数2

//在AngularJS中使用过滤器格式化展示数据，
// 在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。

}

});

// 自定义控制器的
App.controller('DemoController', ['$scope', function ($scope) {

$scope.name = '小明';

$scope.info = 'my name is ';
//<h4>{{info|capitalize:123}}{{name}}</h4>向上看
//info调用capitalize过滤器
//info= 'my name is ';
//即'my name is '当第一个参数传递进去====>capitalize

//123当第二参数传进去====>name

}]);

</script>
</body>
</html>