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;
        };
    }
);

score 2 · Accepted Answer · answered Dec 07 '15 at 14:31

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)

ng-bind failing when using a custom filter

1 Answers1