Angular的过滤器和自定义过滤器

  1. html>  
  2.     <head>  
  3.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  4.         <!-- 引入AngularJS库 -->  
  5.         <script  src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>  
  6.     </head>  
  7.     <body>  
  8.         <!--   
  9.             过滤器   
  10.              {{name |uppercase}}把字母全部转换成大写  
  11.              {{arr|orderBy}}排序数组从小到大  
  12.          -->  
  13.           
  14.         <div ng-app="myApp" ng-controller="myController">  
  15.             <p>  
  16.                 名字 :  
  17.                 <input type="text" ng-model="name">  
  18.             </p>  
  19.             <h1>  
  20.                 Hello {{name |uppercase}}  
  21.                 <p ng-bind="name"></p>  
  22.             </h1>  
  23.             <h1>  
  24.                 {{arr|orderBy|reverse}}  
  25.             </h1>  
  26.         </div>  
  27.     </body>  
  28.     <script type="text/javascript">  
  29.         //获取app对象module  
  30.         var app = angular.module('myApp', []);  
  31.         //controller层会调用service层  控制层参数斥是提供服务的参数  
  32.         //$scope作用域  $location路径服务  $http发送ajax   
  33.         app.controller('myController', function($scope){  
  34.             $scope.name="ls";  
  35.             $scope.arr=[1,4,5,7,6,3,2]  
  36.         });  
  37.           
  38.         //自定义过滤器,参数1表示过滤器名称  参数2表示调用过滤的方法  
  39.         app.filter('reverse',function(){  
  40.             return function(text){  
  41.                 return text.reverse();  
  42.             }  
  43.         })  
  44.     </script>  
  45. </html>  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值