在angular指令中使用ng-repeat过滤器

Question

I have an directive for repeat my products and it's work fine. but i want add some filter add to it.

Here is my directive code:

app.directive('product', ['$compile', function($compile) {
    return {
        restrict: 'E',
        scope: {
            products: '='
        },
        link: function(scope, element, attrs) {
            var template =
                '<ul>' +
                    '<li data-ng-repeat="product in products>' +
                        '{{product.productName}}' +
                    '</li>' +
                '</ul>';

            // Render the template.
            element.html('').append($compile(template)(scope));
        }
    }
}]);

When i add directive to my html, show me wired error!

<product products="products | filter:{mainCategoryID : category.categoryID}:true"></product>

error in console:

How i can fix this issue?

Answer 1

try this

 var app = angular .module('MyApp', [ ]) .controller('Main', ['$scope', function ($scope) { var self = this; self.products = [{"productName":"a","id":12},{"productName":"b","id":"34"}]; }]) .directive('product', ['$compile', function($compile) { return { restrict: 'E', scope: { products: '=', ngModel : '=', }, link: function(scope, element, attrs) { var template = '<ul>' + '<li data-ng-repeat="product in products |filter:{id:ngModel}">' + '{{product.productName}}' + '</li>' + '</ul>'; // Render the template. element.html('').append($compile(template)(scope)); } } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl"> <div> <input type="text" ng-model="myCtrl.pID" /> <product products="myCtrl.products " ng-model="myCtrl.pID"></product> </div> </div> 

Answer 2

Instead of creating a directive. Use filter in your ng-repeat

<div data-ng-repeat="product in products | filter: checkId"></product>
   <ul>
       </li>
           {{product.productName}}
       </li>
   </ul>
<div>

In your controller

$scope.checkId = #you can do whatever you wanted to.