Почему у меня не работает фильтр заголовков angular?

Question

Я пишу одностраничное приложение AngularJS.

В файле index.html у меня есть следующие строки:

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

Я определил имя контроллера MyController.Этот контроллер имеет переменную с именем my_name, которая содержит строку "HELLO".Контроллер работает с файлом шаблона HTML с именем my_fragment.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+, который вы используете 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), если вышеперечисленное не работает.

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>

Answer 3

Ссылка, которую вы указали, была на трубу titlecase в документах Angular 2+.Однако в AngularJS (Angular 1.x) существуют только фильтры lowercase и uppercase, которыми вы пользуетесь.

YouВозможно, вам придется реализовать фильтр titlecase самостоятельно.