如何将过滤器传递到angular指令中，以便在ng-repeat中使用?

How can I pass a filter into an angular directive to be used in an ng-repeat?

本文关键字：ng-repeat 指令 过滤器 angular      更新时间：2023-09-26

我试图建立一个指令，这样我就可以在指令中使用的数据，以及将在ng-repeat中使用的特定过滤器。这行不通，所以我想我解决整个问题的方法是错误的。

如何传入过滤器?或者，我如何预过滤/排序我传入的列表?

(作用域必须是隔离的，因为我想在同一页面上有多个列表)

<!DOCTYPE HTML>
<html ng-app="MyApp">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script>
var myApp = angular.module('MyApp', []);
myApp.controller('mainPage',function($scope){
    $scope.cars = ["Saab","Volvo","BMW"];
    });
myApp.directive('carList',function(){
    return {
        scope: {
        listOfCars: '=',
        carFilter : '@'
        },
        restrict: 'E',
        replace: 'true',
        template: '<table>'
    <tr ng-repeat="{{carFilter}}">'
    <td>{{car}}</td>'
    </tr>'
    </table>'
    };
});
    </script>
</head>
<body ng-controller="mainPage">
<car-list list-of-cars="cars" car-filter='car in listOfCars | orderBy:"toString()"' ></car-list>
</body>
</html>

带有上述代码的Plunker:http://plnkr.co/edit/ipsF15?p=preview

好的，所以我认为这是一个可行的解决方案-而不是传递过滤器，传递过滤列表，像这样:

<!DOCTYPE HTML>
<html ng-app="MyApp">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular.min.js"></script>
    <script>
var myApp = angular.module('MyApp', []);
myApp.controller('mainPage',function($scope){
    $scope.cars = ["Saab","Volvo","BMW"];
    });
myApp.directive('carList',function(){
    return {
        scope: {
        listOfCars: '&',
        },
        restrict: 'E',
        replace: 'true',
        template: '<table>'
    <tr ng-repeat="car in listOfCars()">'
    <td>{{car}}</td>'
    </tr>'
    </table>'
    };
});
    </script>
</head>
<body ng-controller="mainPage">
<car-list list-of-cars="cars | orderBy:'toString()' | limitTo:2 " ></car-list>
</body>
</html>

感觉不太直观。这是正确的方法吗?

相关文章：