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

最新推荐文章于 2024-10-06 11:02:46 发布

你只是看上去很努力

最新推荐文章于 2024-10-06 11:02:46 发布

阅读量207

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40312617/article/details/78051189

这篇博客介绍了AngularJS中的一些核心功能，包括使用内置过滤器进行数据转换（如`uppercase`和`lowercase`实现大小写转换，`currency`进行货币格式化），`orderBy`过滤器对数组进行排序，以及如何自定义过滤器。示例展示了如何通过`ng-repeat`指令显示排序后的城市列表，并用自定义过滤器`aa`进行字符串反转操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>