ng-bind failing when using a custom filter

Question

I've looked through a number of responses and can't for the life of me figure out why my code isn't working!

I want to apply a simple custom filter to a variable passed from the controller. The room-price value displays fine. however, when I add the price-per-night filter the value disappears.

Can anyone suggest a solution? Thanks

Template

<div class="h3 left-align p1" ng-bind="room.price | price-per-night"></div>

Controller

routerApp.controller('MyController', function($scope) {
    $scope.rooms = [
    {
        name: 'Basic',
        price: 50
    }]
});

Filter

routerApp.filter("price-per-night",
    function() {
        return function(price) {
            var output = '£' + price + ' ' + 'per night';
            return output;
        };
    }
);

Arg0n · Accepted Answer · 2015-12-07 14:31:37Z

2

Name your filter pricePerNight. - is not allowed in the name:

routerApp.filter("pricePerNight",
    function() {
        return function(price) {
            var output = '£' + price + ' ' + 'per night';
            return output;
        };
    }
);

(You still use price-per-night in your HTML)

answered Dec 7, 2015 at 14:31

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

ng-bind failing when using a custom filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related