angular里的filter过滤数据传参

最新推荐文章于 2022-07-05 10:32:37 发布

zhifeng687

最新推荐文章于 2022-07-05 10:32:37 发布

阅读量7.5k

点赞数

分类专栏： angular.js

angular.js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何在AngularJS中使用ng-repeat结合自定义过滤器实现数据的动态过滤及倒序显示。通过实例展示了如何根据变量进行过滤，并提供了实现倒序循环的方法。

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

在ng-repeat中使用过滤器filter ，则在filter闭包内第一个参数，就是ng-repeat中的原数组，其余参数可以在-repeat表达式中，使用filterName ：param1 :param2 提供。

如果参数是$scope中的变量，直接写上去即可，不用加引号。

控制器:$scope.dataList=[

{"dataClass":"0","dataName":"A1"},
{"dataClass":"0","dataName":"A2"},
{"dataClass":"1","dataName":"B1"},
{"dataClass":"1","dataName":"B2"},
{"dataClass":"2","dataName":"C1"},
{"dataClass":"2","dataName":"C2"}

]
HTML模板:
<li ng-repeat="item in dataList |filter :{'dataClass'：'0'}">{{item.dataName}}</li>
页面展示将循环过滤出dataList数组中dataClass为'0'的A1,A2;现在的需求是dataClass过滤的值是一个变量设为varity，而ng-repeat="item in dataList |filter :{'dataClass'：varity}"，又不生效，请问如何实现该需求

帮你写了个过滤器，把指定的dataClass去掉了：

angular.module('common', []).filter('myFilter', function () {
        return function (collection, keyname,value) {
            var output = [];
            angular.forEach(collection, function (item) {
                //过滤数组中值与指定值相同的元素
                if(item[keyname]!=value){
                    output.push(item);
                }
            });
            return output;
        }
    });

<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-repeat="x in items | myFilter: 'dataClass': dcValue ">
        {{x.dataClass}}---{{x.dataName}}
    </p>
</div>

过滤器接收3个参数，原数组，要过滤的key，以及指定的key值。

引自： angular里的filter过滤数据传参问题

ng-repeat 倒序循环

我想要用angularjs循环一个json数组，

<div class="gwc-div mar-t20"  ng-repeat="shopdata in cartinfo.shopList" >
</div>

如果要倒叙的循环有什么方法吗？

可以这样:

<div class="gwc-div mar-t20"  ng-repeat="shopdata in cartinfo.shopList.slice().reverse()" ></div>

或者声明一个filter...

js:

app.filter('reverse', function() {
    return function(items) {
        return items.slice().reverse();
    };
});

view:

<div class="gwc-div mar-t20" ng-repeat="shopdata in cartinfo.shopList | reverse" ></div>

引自： ng-repeat 倒序循环