Angular.js之内置过滤器学习笔记

时间:2023-12-04 22:33:32

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularFilter</title>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
</head>
  <body ng-app="angularJS" ng-controller="ctrl">
    <div>{{time | date:'yyyy年mm月dd日 hh时mm分ss秒'}}</div>
    <div>{{money | currency:'¥':3}}</div>
    <span>{{money | number:3}}</span>
    <span>{{string | lowercase}} or:{{string | uppercase}}</span>
    <span>{{string | limitTo:2:0}}</span>
    <div>{{data | orderBy:'id':false}}</div>
    <div>{{data | filter:'jinDon':false}}</div>

<script type="text/javascript">
    /*angular.js内置过滤器:
    *currency/number:货币/数值过滤器,currency的第二个参数为小数点位数,采取四舍五入
    *lowercase/uppercase
    *limitTo/date:limitTo第一个参数为截取字符串长度,第二个参数为起始位置
    *orderBy/filter:orderBy第二个参数为true时为倒序;filter第二个参数为true时要完全匹配才筛选成功,为false时只需要包含筛选字符串既筛选成功
    */
    var m=angular.module('angularJS',[]);
    m.controller('ctrl',['$scope',function($scope){
      $scope.time=new Date().getTime();
      $scope.money=890.43655;
      $scope.string="China";
      $scope.data=[{
              id:1,
              title:"jinDon store"
            },{
              id:2,
              title:"SuNing store"
            },{
              id:3,
              title:"TianMao store"
            },{
              id:4,
              title:"TaoBao store"
       }];
     }]);
</script>
</body>
</html>