Why AngularJS custom filter not working?

Question

I'm using angular.min.js file (AngularJS v1.6.4)

And I'm trying to implement a simple filter that reverses a string.

Here is my code:

main.js:

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

app.filter('reverse', function () {
   return function (item) {
       item.split("").reverse().join("");
   };
});

app.controller("MyController", function ($scope) {
    $scope.data = {
        message: ""
    };

    $scope.reversedMessage = function (message) {
        return message.split("").reverse().join("");
    }
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Blackbox</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div ng-app="angularBlackbox">
    <div ng-controller="MyController">
        <input type="text" ng-model="data.message">
        <h1>{{ data.message }}</h1>
        <h1>{{ reversedMessage(data.message) }}</h1>
        <h2>{{ data.message | reverse }}</h2>
    </div>
</div>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

I get such result:

So we can see that:

data binding works [OK];
controller's function reversedMessage works [OK];
filter doesn't work [Not OK] (heading <h2>{{ data.message | reverse }}</h2> is not visible)

Why is the custom filter not working?

You dont return from your filter - return item.split(... — tymeJV
– tymeJV, Commented Aug 22, 2017 at 16:14

Pankaj Parkar · Accepted Answer · 2017-08-22 16:15:53Z

3

return formatted output from your filter.

app.filter('reverse', function () {
   return function (item) {
       //returned reversed string from here.
       return item.split("").reverse().join("");
   };
});

Check Here

answered Aug 22, 2017 at 16:15

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

user7110739 · Accepted Answer · 2017-08-22 16:18:07Z

2

// You need to return the filtered data.

app.filter('reverse', function () {
   return function (item) {
       return item.split("").reverse().join("");
   };
});

answered Aug 22, 2017 at 16:18

user7110739

1 Comment

Aleksey Kurkov Over a year ago

Forgot to write Return statement. Yes. Thanks for your answer!

Collectives™ on Stack Overflow

Why AngularJS custom filter not working?

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related