CODEWITHSUNDEEP
javascriptangularjs
Dark star
Dark star

Reputation: 5832

Use ng-repeat filter in angular directive

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:

enter image description here

How i can fix this issue?

Upvotes: 0

Views: 563

Answers (2)

Hadi
Hadi

Reputation: 17289

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>

Upvotes: 3

Pravesh Khatri
Pravesh Khatri

Reputation: 2264

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.

Upvotes: 0

Related Questions