Custom Filter in AngularJS Custom directive

Question

I 've seen some other questions with similar problem as mine but I can't grasp the way that this is done.

    var app = angular.module('myApp', ['directives', 'services']);

angular.module('services', []).filter('selectedItems', function() {
  return function(fields, parent) {
    var arrayFields = [];
    for (var i = parent; i < fields.length; i++) {
      if (fields[i].Parent == parent) {
        arrayFields.push(fields[i]);
      }
    }
    return arrayFields;
  };
});

angular.module('directives', ['services']).directive('itemlist', ['selectedItemsFilter',
  function(selectedItems) {
    var listDirective = {
      restrict: "E",
      scope: {
        Children: '=itemchild'
      },
      link: function(scope, element, attrs) {
        // scope.Children = attrs.itemchild;
        console.log(scope.Children);
      },
      template: function(element, attrs) {
        return '<ul>'
        // +'<li ng-repeat="item in mainList | Items:'+attrs.itemparent+'">'
        + '<li ng-repeat="item in mainList | selectedItems:' + attrs.itemparent + '">' + '{{item.itemTitle}}'

        + '</li>{{Children}}' + '</ul>';
      },
    };
    return listDirective;
  }
]);

app.controller('listTemplater', function($scope) {
  $scope.information = {
    header: "List Controll template!"
  };
  $scope.mainList = [{
    itemTitle: "Item 1",
    value: "1",
    Parent: "0",
    children: true
  }, {
    itemTitle: "Item 1.1",
    value: "4",
    Parent: "1",
    children: true
  }, {
    itemTitle: "Item 1.1.1",
    value: "13",
    Parent: "4",
    children: false
  }, {
    itemTitle: "Item 1.1.2",
    value: "14",
    Parent: "4",
    children: false
  }, {
    itemTitle: "Item 1.1.3",
    value: "15",
    Parent: "4",
    children: false
  }, {
    itemTitle: "Item 1.2",
    value: "5",
    Parent: "1",
    children: false
  }, {
    itemTitle: "Item 1.3",
    value: "6",
    Parent: "1",
    children: false
  }, {
    itemTitle: "Item 2",
    value: "2",
    Parent: "0",
    children: true
  }, {
    itemTitle: "Item 2.1",
    value: "7",
    Parent: "2",
    children: false
  }, {
    itemTitle: "Item 2.2",
    value: "8",
    Parent: "2",
    children: false
  }, {
    itemTitle: "Item 2.3",
    value: "9",
    Parent: "2",
    children: false
  }, {
    itemTitle: "Item 3",
    value: "3",
    Parent: "0",
    children: true
  }, {
    itemTitle: "Item 3.1",
    value: "10",
    Parent: "3",
    children: false
  }, {
    itemTitle: "Item 3.2",
    value: "11",
    Parent: "3",
    children: false
  }, {
    itemTitle: "Item 3.3",
    value: "12",
    Parent: "3",
    children: false
  }, ];

  $scope.debug = function() {
    console.log($scope.innerLists);
  }
});

I am trying to replicate the first list with AngularJS. In the plunk you 'll find an object with all the list items and the relations with each other.
I created a custom directive and I am trying to pass a custom filter.
Every time I get an injection error on the filter.
Any suggestions will be appreciate!

Pankaj Parkar · Accepted Answer · 2015-01-30 13:04:53Z

1

Just Remove dependancy selectedItemsFilter of filter from your directive all will works fine.

No need to add filter dependency inside directive. You can use it by just filter name as you are rendering it on view.

Filter

angular.module('services', []).filter('selectedItems', function() {
    return function(fields, parent){
      if(fields){ // added check for safe code
        var arrayFields = [];
        for (var i = parent; i < fields.length; i++) {
            if (fields[i].Parent == parent) {
                arrayFields.push(fields[i]);
            }
        }
        return arrayFields;
      }
    };
});

Here is Working Fiddle

edited Jan 30, 2015 at 13:04

answered Jan 28, 2015 at 9:51

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

7 Comments

Giwrgos Gkogkas Over a year ago

Doing that returns "Error: fields is undefined". Anything else to do?

Giwrgos Gkogkas Over a year ago

It doesn't. It prints if there are children, but not the childrens themselves. To make it easier for you I am trying to learn how to build directives with recursion. I use a not nested JSon array.

Giwrgos Gkogkas Over a year ago

Wow, yes it works now... Thnks, I am going to test recursion with what you gave me...

Pankaj Parkar Over a year ago

@Did you find any solution..I believe with current solution we can't implement recursion

Giwrgos Gkogkas Over a year ago

This is exactly what I am Thinking.

|

Collectives™ on Stack Overflow

Custom Filter in AngularJS Custom directive

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related