Search code examples
angularjstypescriptangular-filters

How to implement filter with Typescript?

I have this filter:

module App.Filters {
    export class LabelCase implements ng.IFilterService {
        static $inject = ['$filter'];

        public static factory(): Function {
           return (input: string) => {
                input = input.replace(/(A-Z)/g, '$1');
                return input[0].toUpperCase() + input.slice(1);
            }
        }
    }
}

Here is the registration in app.js

this.app.filter("labelCase", () => App.Filters.LabelCase.factory);

This gives me an error.

What I'm doing wrong?

Error: [$injector:unpr] http://errors.angularjs.org/1.2.23/$injector/unpr?p0=lableCaseFilterProvider%20%3C-%20lableCaseFilter
x/<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:6:443
gc/l.$injector<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:36:196
c@http://localhost:2861/Scripts/vendors/angular/angular.min.js:34:300
gc/p.$injector<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:36:266
c@http://localhost:2861/Scripts/vendors/angular/angular.min.js:34:300
mc/this.$get</<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:124:325
db.prototype.filter@http://localhost:2861/Scripts/vendors/angular/angular.min.js:171:352
db.prototype.filterChain@http://localhost:2861/Scripts/vendors/angular/angular.min.js:171:257
db.prototype.statements@http://localhost:2861/Scripts/vendors/angular/angular.min.js:171:1
db.prototype.parse@http://localhost:2861/Scripts/vendors/angular/angular.min.js:167:470
Yd/this.$get</<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:99:13
f@http://localhost:2861/Scripts/vendors/angular/angular.min.js:80:39
x@http://localhost:2861/Scripts/vendors/angular/angular.min.js:62:8
ea@http://localhost:2861/Scripts/vendors/angular/angular.min.js:49:421
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:47:344
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
w@http://localhost:2861/Scripts/vendors/angular/angular.min.js:46:124
F@http://localhost:2861/Scripts/vendors/angular/angular.min.js:56:187
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:47:373
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
K@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:40
w@http://localhost:2861/Scripts/vendors/angular/angular.min.js:46:124
z/<.link@http://localhost:2861/Scripts/vendors/angular/angular-route.min.js:7:202
O@http://localhost:2861/Scripts/vendors/angular/angular.min.js:54:392
g@http://localhost:2861/Scripts/vendors/angular/angular.min.js:47:256
w/<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:46:374
W/<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:48:215
L@http://localhost:2861/Scripts/vendors/angular/angular.min.js:52:40
v@http://localhost:2861/Scripts/vendors/angular/angular-route.min.js:6:355
Zd/this.$get</k.prototype.$broadcast@http://localhost:2861/Scripts/vendors/angular/angular.min.js:114:322
l/<@http://localhost:2861/Scripts/vendors/angular/angular-route.min.js:11:177
ye/e/l.promise.then/L@http://localhost:2861/Scripts/vendors/angular/angular.min.js:100:167
ye/e/l.promise.then/L@http://localhost:2861/Scripts/vendors/angular/angular.min.js:100:167
ye/f/<.then/<@http://localhost:2861/Scripts/vendors/angular/angular.min.js:101:340
Zd/this.$get</k.prototype.$eval@http://localhost:2861/Scripts/vendors/angular/angular.min.js:112:57
Zd/this.$get</k.prototype.$digest@http://localhost:2861/Scripts/vendors/angular/angular.min.js:109:139
Zd/this.$get</k.prototype.$apply@http://localhost:2861/Scripts/vendors/angular/angular.min.js:112:396
h@http://localhost:2861/Scripts/vendors/angular/angular.min.js:72:441
v@http://localhost:2861/Scripts/vendors/angular/angular.min.js:77:463
we/</w.onreadystatechange@http://localhost:2861/Scripts/vendors/angular/angular.min.js:79:24

HTML:

<table class="table table-bordered table-hover text-right">
    <thead>
        <tr>
            <th ng-repeat="field in report.fields" class="text-center" ng-click="report.sorterer(field)">
                <span ng-show="report.sort.field === field && !report.sort.order" class="glyphicon glyphicon-chevron-down"></span>
                <span ng-show="report.sort.field === field && report.sort.order" class="glyphicon glyphicon-chevron-up"></span>
                {{ field | lableCase }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in report.contacts | filter: report.query | orderBy: report.sort.field : report.sort.order">
            <td ng-repeat="field in report.fields">
                {{contact[field]}}
            </td>
        </tr>
    </tbody>
</table>
Solution

  • You misspelled "label" in your HTML:

    {{ field | lableCase }}

    should be

    {{ field | labelCase }}