Use ng-repeat filter in angular directive

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?

Can you show us your weird error! ?

Pravesh Khatri
– Pravesh Khatri

2016-05-28 06:14:47 +00:00
Commented May 28, 2016 at 6:14 — Pravesh Khatri
– Pravesh Khatri, Commented May 28, 2016 at 6:14
@BABU I add screenshot of error.

Dark star
– Dark star

2016-05-28 06:14:57 +00:00
Commented May 28, 2016 at 6:14 — Dark star
– Dark star, Commented May 28, 2016 at 6:14
@PraveshKhatri added

Dark star
– Dark star

2016-05-28 06:15:22 +00:00
Commented May 28, 2016 at 6:15 — Dark star
– Dark star, Commented May 28, 2016 at 6:15

Hadi · Accepted Answer · 2016-05-28 15:26:53Z

3

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>

edited May 28, 2016 at 15:26

answered May 28, 2016 at 6:18

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dark star Over a year ago

What is the pID?

Dark star Over a year ago

nope. it's does't work! I want filter be changeable in html code. like that one I share on first post.

Pravesh Khatri · Accepted Answer · 2016-05-28 06:36:00Z

0

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.

answered May 28, 2016 at 6:36

Pravesh Khatri

2,28418 silver badges22 bronze badges

1 Comment

Dark star Over a year ago

dude. I want be a directive!

Collectives™ on Stack Overflow

Use ng-repeat filter in angular directive

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related