排序 转换大(小)写 , 自定义过滤器, data格式化, 指定查找, 升序,降序

来源:互联网 发布:电子设计学什么软件 编辑:程序博客网 时间:2024/05/16 10:59
<!DOCTYPE html><html><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script><body ng-app="myApp"><div ng-controller="myCtrl">    <div ng-bind="myName  | uppercase"></div> <!--uppercase转换成大写-->    <div ng-bind="myName  | lowercase"></div> <!--lowercase转换成小写-->    <div class="" ng-bind="money | currency : '¥'"> </div><!--currency 过滤器将数字格式化为货币格式-->    <div class="" ng-repeat="v in city | orderBy:'name'">        <p ng-bind="v.name"></p>    </div><!--orderBy 过滤器根据表达式排列数组-->                    <div class="" ng-repeat="v in city | orderBy:'-id' | filter : ''">        <p ng-bind="v.name" style="color:red;"></p>    </div><!--orderBy 过滤器根据表达式排列数组   默认正序asc,倒序添加-负号-->    <!--filter 过滤器根据表达式过滤不包含过滤器中的内容-->    <!--自定义注入依赖-->    <div class="" ng-bind="myName | aa" style="color:blue;"> <!--自定义过滤器aa-->    </div></div><script>    angular.module('myApp',[]).controller('myCtrl',function($scope){        $scope.myName="shiqichao";        $scope.money=100;        $scope.city=[            {"id":"1","name":"福建"},            {"id":"2","name":"广东"},            {"id":"5","name":"上海"},            {"id":"4","name":"北京"},            {"id":"3","name":"四川"}        ]    }).filter('aa',function(){ //自定义过滤器,aa为自定义过滤名称 ,val为穿参,split("")将val切割成数组,reverse()将数组反转,join("")将数组变成字符串        return function(val){            return val.split("").reverse().join("");        }    })</script></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script></head><body>   <div  ng-app=""><p>1、uppercase,lowercase 大小写转换</p>{{ "lower cap string" | uppercase }}<br>   {{ "TANK is GOOD" | lowercase }}  <p>2、date 格式化</p>{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}  <p>3、number 格式化(保留小数)</p>{{149016.1945000 | number:2}}<p>4、currency货币格式化</p>{{ 250 | currency }} <br>{{ 250 | currency:"RMB ¥ " }}<p>5、filter查找</p><p>查找name为iphone的行</p>{{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | filter:{'name':'iphone'} }}   <p>6、limitTo 截取</p>{{"1234567890" | limitTo :6}}<br>{{"1234567890" | limitTo:-4}}  <p>7、orderBy 排序</p><p>根id降序排</p>{{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | orderBy:'id':true }}  <p>根据id升序排</p>{{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | orderBy:'id' }}</div></body></html>
阅读全文
0 0
原创粉丝点击