angular中filter的使用

最新推荐文章于 2022-01-14 17:01:08 发布

十盏

最新推荐文章于 2022-01-14 17:01:08 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： anjular filter

本文链接：https://blog.youkuaiyun.com/IT_1692/article/details/77051046

angular 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在AngularJS中使用内置的filter功能过滤数组中的元素，并提供了自定义filter的具体实现示例，包括如何创建自定义filter来处理字符串数据。

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

1、直接在html中使用filter，过滤特定的字符

例如：

<div ng-repeat="name in nameList | filter:'张朋'">{{name}}</div>　　//nameList 为["王三","张朋","李二"]，过滤含有“张鹏”的项

2、自定义filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filterTest</title>
</head>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<div>{{arr | sourceDataType:'0':'charge'}}</div>
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
        $scope.arr="0,charge";
    });
    app .filter("sourceDataType",function(){
        return function(obj,argu1,argu2){
            if (!obj) {
                return [];
            }
            obj = obj.split(",");    //将字符"0,1,2,3"创切分为数组[0,1,2,3]
           var display;
            var flag = obj.filter(function(item){　　//filter会用来遍历传入的数据
                if(item == argu1){
                    display = "超级用户";
                }
                if(item == argu2){
                    display+=",已缴费";
                }
            });
            return display;
        }
    });
</script>
</html>

以上代码页面输出结果为：