-
AngularJS中自定义指令处理 以ng开头的指令都是内置指令。
-
内置指令是AngularJS已经处理,使用内置的指令就可以达到相应的功能。
-
但是内置指令的不足之处就是不灵活。
-
过滤器是用来格式化数据用的。
-
过滤器的本质就是一个方法
-
angular 内置了9个过滤器
-
currency ：将数值格式转化为货币格式
-
date : 日期格式化 年（yyyy） 月（MM） 日（dd） 星期（EEEE/EEE） 时（HH / hh） 分（mm） 秒（ss） 毫秒（.sss） 可以组合到一起使用，也可以分开使用
-
filter : 在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
-
json : 将JavaScript 对象转化为JSON字符串
-
limitTo : 用来做截取的过滤器，截取出字符串或数组的前（正数）几位或后（负数）几位
-
lowercase : 将文本转换为小写格式
-
uppercase : 将文本转换为大写格式
-
number ： 数字格式化，可控制小位位数
-
orderBy : 排序过滤器。对数组进行排序，第2个参数可控制方向；TRUE是降序；false是升序
-
-
管道符 “ | ”
- 上次的结果当做下次的参数进行传递
-
如果想要手动传参，使用 ： 进行传递
<body ng-app = "app" ng-controller = "wmxController">
<!--1. 将数值格式转化为货币格式-->
<!-- $100.00 -->
<!--默认的时候在前面加上美元符号-->
<p>{{money | currency}}</p>
<!--传递参数-->
<!-- @@100.00 -->
<p>{{money | currency : "@@"}}</p>
<!-- 2.日期格式化 -->
<!--1508076493508-->
<p>{{dateNow}}</p>
<!--Oct 15, 2017-->
<p>{{dateNow | date }}</p>
<!--2017-10-15 Sunday 10:12:59-->
<p>{{dateNow | date:'yyyy-MM-dd EEEE hh:mm:ss'}}</p>
<!--3.在给定数组中选择满足条件的一个子集-->
<!--["css","js"]-->
<p>{{course | filter:'s'}}</p>
<!--4.将JavaScript 对象转化为JSON字符串-->
<!--[ { "name": "wmx", "age": 16 }, { "name": "mjb", "age": 17 }, { "name": "xcm", "age": 18 } ]-->
<p>{{student | json}}</p>
<!--5.取出字符串或数组的前（正数）几位或后（负数）几位-->
<!--[{"name":"mjb","age":17},{"name":"xcm","age":18}]-->
<p>{{student | limitTo:-2}}</p>
<!--[{"name":"wmx","age":16}]-->
<p>{{student | limitTo:1}}</p>
<!--6.将文本转换为大写格式-->
<!--XIAOCAOMEI-->
<p>{{str | uppercase }}</p>
<!--7.将文本转换为小写格式-->
<!--xiaocaomei-->
<p>{{word | lowercase}}</p>
<!--8.数字格式化，可控制小位位数-->
<!--1234.00-->
<!--在num中不能出现非数字-->
<!--参数表示保留几位小数-->
<p>{{num | number:2}}</p>
<!--9. 对数组进行排序，第1个参数是对哪个属性进行排序，第2个参数可控制方向。-->
<!--两个参数之间用冒号隔开-->
<!--TRUE是降序；false是升序-->
<!--默认是降序-->
<!--[{"name":"wmx","age":16},{"name":"mjb","age":17},{"name":"xcm","age":18}]-->
<p>{{student | orderBy:'age'}}</p>
<!--[{"name":"wmx","age":16},{"name":"mjb","age":17},{"name":"xcm","age":18}]-->
<p>{{student | orderBy:'age':false}}</p>
<!--[{"name":"xcm","age":18},{"name":"mjb","age":17},{"name":"wmx","age":16}]-->
<p>{{student | orderBy:'age':true}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('wmxController',['$scope',function ($scope) {
$scope.money = 100;
$scope.dateNow = Date.now();
$scope.course = ['html','css','js'];
$scope.student = [
{ name:'wmx', age:16},
{ name:'mjb', age:17},
{ name:'xcm', age:18}
];
$scope.str = 'xiaocaomei';
$scope.word = 'XIAOCAOMEI';
$scope.num = 1234;
}]);
</script>
</body>
网友评论