为什么angular的titlecase过滤器对我不起作用？

Question

我正在编写AngularJS单页应用程序。

在index.html文件中，我有以下几行：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>

我已经定义了一个控制器名称MyController。该控制器具有一个名为my_name的变量，其中包含字符串“ HELLO”。该控制器与称为my_fragment.html的HTML模板文件一起使用。该HTML文件如下所示：

<div ng-controller="MyController as myCtrl" class="full_screen_container">
    MyString = {{myCtrl.my_name | lowercase}}
</div>

有效。浏览器中的输出如下所示：

MyString = hello

但是现在，我不希望my_name小写。 我希望它是titlecased。但是，当我在lowercase中将单词titlecase更改为my_fragment.html时，它失败了。这是我的浏览器中显示的内容：

MyString = {{myCtrl.my_name | lowercase}}

这是我在Chrome开发者控制台中看到的错误：

titlecase为什么不起作用？我如何使它工作？

Answer 1

您提供的链接是Angular 2+文档中的titlecase管道。但是，您正在使用的AngularJS（Angular 1.x）中似乎仅存在lowercase和uppercase过滤器。

您可能必须自己实现titlecase过滤器。

Answer 2

您可以使用选择的角度版本（ v1.6.4 ）编写这样的过滤器。这样，您就可以在整个应用程序中使用它。

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

app.controller('Ctrl', function ($scope) {
   $scope.msg = 'hello, world. this is a title case example.';
});

app.filter('titlecase', function() {
    return function(input) {
      if (!input || typeof input !== 'string') {
        return '';
      }

      return input.toLowerCase().split(' ').map(value => {
        return value.charAt(0).toUpperCase() + value.substring(1);
      }).join(' ');
    }
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-app="app">
    <div ng-controller="Ctrl">
        <p><b>Filter:</b> {{msg | titlecase}}</p>
    </div>
</div>