Angularjs. How can I pass variable as argument to custom filter?

Question

I have following HTML

<span class="items-count">{{items | countmessage}}</span>

And following filter to show right count message

    app.filters
    .filter('countmessage', function () {
        return function (input) {
            var result = input.length + ' item';
            if (input.length != 1) result += 's';
            return message;
        }
    });

but I want use different words instead 'item(s)', so I modified the filter

    app.filters
    .filter('countmessage', function () {
        return function (input, itemType) {
            var result = input.length + ' ' + itemType;
            if (input.length != 1) result += 's';
            return message;
        }
     });

it works when I use a string like that

<span class="items-count">{{items | countmessage:'car'}}</span>

but doesn't work with a variable from the $scope, is it possible to use $scope variable

<span class="items-count">{{items | countmessage:itemtype}}</span>

Thanks

Hassaan · Accepted Answer · 2018-02-05 11:18:55Z

42

Yes, it is possible to use variable from the $scope

See this fiddle for an example: http://jsfiddle.net/lopisan/Kx4Tq/

HTML:

<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input ng-model="variable"/><br/>
        Live output: {{variable | countmessage : type}}!<br/>
          Output: {{1 | countmessage : type}}!
    </div>
</body>

JavaScript:

var myApp = angular.module('myApp',['myApp.filters']);

function MyCtrl($scope) {
    $scope.type = 'cat';
}

 angular.module('myApp.filters', [])
    .filter('countmessage', function () {
        return function (input, itemType) {
            var result = input + ' ' + itemType;
            if (input >  1) result += 's';
            return result;
        }
     });

edited Feb 5, 2018 at 11:18

Hassaan

7,7207 gold badges34 silver badges53 bronze badges

answered Mar 27, 2013 at 14:09

lopisan

7,8303 gold badges39 silver badges45 bronze badges

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

4 Comments

IgorCh Over a year ago

ok thanks, I found it already, I just missed my variable for the current scope, it works now.

Clev3r Over a year ago

Can we generate the $scope.type dynamically through user input? Such as: <input type='text' ng-model='searchTerm'>?

lopisan Over a year ago

@Clever: Yes it can be done, just add <input ng-model="type"/> to the HTML part of the fiddle.

Clev3r Over a year ago

Thanks. After a few hours of headbanging yesterday, I found my issue was actually a child-parent scope inheritance problem stemming from ng-include.

Collectives™ on Stack Overflow

Angularjs. How can I pass variable as argument to custom filter?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related