- html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <!-- 引入AngularJS库 -->
- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
- </head>
- <body>
- <!--
- 过滤器
- {{name |uppercase}}把字母全部转换成大写
- {{arr|orderBy}}排序数组从小到大
- -->
- <div ng-app="myApp" ng-controller="myController">
- <p>
- 名字 :
- <input type="text" ng-model="name">
- </p>
- <h1>
- Hello {{name |uppercase}}
- <p ng-bind="name"></p>
- </h1>
- <h1>
- {{arr|orderBy|reverse}}
- </h1>
- </div>
- </body>
- <script type="text/javascript">
- //获取app对象module
- var app = angular.module('myApp', []);
- //controller层会调用service层 控制层参数斥是提供服务的参数
- //$scope作用域 $location路径服务 $http发送ajax
- app.controller('myController', function($scope){
- $scope.name="ls";
- $scope.arr=[1,4,5,7,6,3,2]
- });
- //自定义过滤器,参数1表示过滤器名称 参数2表示调用过滤的方法
- app.filter('reverse',function(){
- return function(text){
- return text.reverse();
- }
- })
- </script>
- </html>
Angular的过滤器和自定义过滤器
最新推荐文章于 2021-10-20 08:44:18 发布