时间戳

首页 > 解决方案 > 为什么 Angular 的 titlecase 过滤器对我不起作用？

javascript - 为什么 Angular 的 titlecase 过滤器对我不起作用？

问题描述

我正在编写一个 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 文件的样子：

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

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

MyString = hello

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

MyString = {{myCtrl.my_name | lowercase}}

这是我在 Chrome 的开发者控制台中看到的错误： 在此处输入图像描述

为什么titlecase行不通？我怎样才能让它工作？

标签： javascriptangularjsgoogle-chrome

解决方案

您提供的链接适用于您使用 AngularJS (1.X) 的 Angular 2+，因此该管道不存在，但是您可以像这样创建自己的 titlecase 函数

function titleCase(str) {
  return str.toLowerCase().replace(/\b\S/g, function(t) { return t.toUpperCase() });
}

并像这样实施它......

MyString = titleCase(myCtrl.my_name)

myCtrl.titleCase(myCtrl.my_name)如果上述方法不起作用，您可能必须这样做。

推荐阅读