代码之家 › 专栏 › 技术社区 › Saqib Ali

为什么angular的titlecase过滤器不适合我?

google-chrome angularjs javascript

Saqib Ali · 技术社区 · 6 年前

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

在索引.html文件,我有以下几行:

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

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

但现在,我不想 我的名字 我希望是这样 titlecased . 但是当我换个词的时候 lowercase 到 titlecase 我的_fragment.html ,它失败了。以下是我的浏览器中显示的内容:

MyString = {{myCtrl.my_name | lowercase}}

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

为什么不呢 滴定酶

3 回复 | 直到 6 年前

Smokey Dawson 6 年前

您提供的链接是为angular2+提供的,您正在使用AngularJS(1.X),因此管道不存在,但是您可以像这样创建自己的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)

Jonathan Lam 6 年前

titlecase 角度2+文档中的管道。然而,只有 lowercase 和 uppercase 过滤器似乎存在于AngularJS(angular1.x)中,这是您正在使用的。

您可能需要实现 滴定酶 自己过滤。

Hamzeen Hameem 6 年前

1.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>