AngularJS, a component using custom filter

Question

So I have read this: how to use custom filter in angularjs which has got me this far. and I didn't want to re-open as it is 3 years old.

the problem I am getting is this, this is copied from the chrome debugger in elements view, it has commented out my loop and filter so nothing has happened on screen.

<!-- ngRepeat: person in $ctrl.people |  icfilter:W -->

My app and filter

var app=angular.module("componentApp", []);

app.filter('icfilter', function() {
    return function(people, filterBy) {
        var out = [],
         lowerFilter = filterBy.toLowerCase();

        angular.forEach(people, function(person) {

          if (person.name.toLowerCase().includes( lowerFilter)){
              out.push(person);
          }
        });

        return out;

      }
});

the html template

<!DOCTYPE html>
<html>
<head>
<script src="angular/angular.min.js"></script>
<script src="app/component.js"></script>

<script src="app/namesList.component.js"></script>
<meta charset="ISO-8859-1">

<title>Components</title>
</head>
<body>

    <div ng-app="componentApp">
        <names-list></names-list>

    </div>
</body>
</html>

and lastly my component

angular.module("componentApp").component("namesList",{
    template: '<div >' +
            '<h4>Family members:</h4>'+


            '<li ng-repeat="person in $ctrl.people |  icfilter:W">{{ person.name +", " + person.age }}</li>'+
        '</div>',
    controller: function namesListController(){
        this.filterBy="W";
        this.people = [ {
            age : 46,
            name : 'Wendy'
        }, {
            age : 50,
            name : 'Joe'
        }, {
            age : 11,
            name : 'Frank'
        }, {
            age : 6,
            name : 'Jenny'
        } ];
        this.sort='name';
    }
});

Shashank Vivek · Accepted Answer · 2018-02-01 15:42:15Z

2

You are almost right. Make below changes and it should work:

'<li ng-repeat="person in $ctrl.people |  icfilter:\'W\'">

You just missed single quotes when passing W :)

Here is the plunker for reference

answered Feb 1, 2018 at 15:42

Shashank Vivek

17.6k9 gold badges70 silver badges110 bronze badges

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

1 Comment

WendyG Over a year ago

Ahh thanks, that makes sense. Which would explain why after all the changes I made during my explorations and then when rebuilding and replacing W with $ctrl.filterBy it started working again.

WendyG · Accepted Answer · 2018-02-01 15:33:54Z

1

IT IS WORKING NOW, BUT I DON'T KNOW WHY.

I put it back together, replacing the code I had removed to make the answer smaller (sorts and filter boxes etc.) well it is working now.

answered Feb 1, 2018 at 15:33

WendyG

6067 silver badges34 bronze badges

Collectives™ on Stack Overflow

AngularJS, a component using custom filter

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related