AngularJS 过滤器

最新推荐文章于 2021-03-25 09:35:17 发布

美食花宴

最新推荐文章于 2021-03-25 09:35:17 发布

阅读量228

点赞数

分类专栏： web 文章标签： angularjs 模块化 web

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

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

<ul ng-controller="DemoContoller">
<li>{{price|currency:'￥'}}</li>
//1、currency 将数值格式化为货币格式

<li>{{now|date:'yyyy/MM/dd hh/:mm:ss'}}</li>
//2、date 以年月日时分秒的格式显示

<li>{{items|filter:'s'}}</li>
//筛选带有s的字符串、对象、函数，返回值是一个新数组

<li>{{students|filter:{age:16} }}</li>
//3、filter在给定数组中选择满足条件的一个子集，
并返回一个新数组，其条件可以是一个字符串、对象、函数

<li>{{students|json}}</li>
//4、json将Javascrip对象转成JSON字符串。

<li>{{items|limitTo:-1}}</li>
//5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位

<li>{{str|uppercase|limitTo:3}}</li>
6、、uppercase将文本转换成大写格式

<li>{{str|lowercase}}</li>
7、lowercase将文本转换成小写格式

<li>{{num|number:2}}</li>
8、number数字格式化，可控制小位位数

<li>{{items|orderBy: '':true}}</li>
9、orderBy对数组进行排序，第2个参数可控制方向

<li>{{students|orderBy: 'age': false}}</li>

</ul>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App',[]);

App.controller('DemoContoller',['$scope',function($scope){

$scope.price = 11.11;

$scope.now = new Date();

$scope.items = ['html','css','js'];
$scope.students = [
{name: '小红', age: 16},
{name: '小明', age: 16},
{name: '小米', age: 10}

];
$scope.str = 'hello Angular';

$scope.num = '10.2345';
}]);

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

美食花宴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 过滤器

AngularJS 过滤器 {{price|currency:'￥'}} //1、currency 将数值格式化为货币格式 {{now|date:'yyyy/MM/dd hh/:mm:ss'}} //2、date 以年月日时分秒的格式显示 {{items|fi
复制链接

扫一扫