angularjs force верхний регистр в текстовом поле

принятый ответ вызывает проблемы, если кто-то пытается ввести строчную букву в начале существующей строки.. Курсор перемещается в конец строки после каждого нажатия клавиши. Вот простое решение, которое решает все вопросы:

directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function(input) {
                return input ? input.toUpperCase() : "";
            });
            element.css("text-transform","uppercase");
        }
    };
})

вот огурчик: http://jsfiddle.net/36qp9ekL/1710/

идея состоит в том, чтобы показать (не преобразовывать) строку в верхнем регистре на стороне клиента и преобразовать в верхний регистр на стороне сервера (пользователи всегда могут контролировать, что происходит на стороне клиента). Итак:

1) в html:

<input id="test" type="text" ng-model="test">

здесь нет преобразования в верхнем регистре.

2) в css:

#test {text-transform: uppercase;}

данные отображаются в верхнем регистре, но на самом деле все еще в нижнем регистре, если пользователь набрал в нижнем регистре. 3) поверните строку в верхний регистр на стороне сервера при вставке в база данных.

= = = = = для игры вокруг, можете попробовать следовать:

<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">

но я думаю, что способы ng-change или ng-blur не нужны для вашего случая.

вы не можете сделать фильтр на NG-модели, так как он должен быть назначаемым. обходным путем является либо парсер, либо просто ng-change.

<input ng-model="some" ng-change="some = (some | uppercase)"  />

Это должно работать.

при использовании с Bootstrap, просто добавьте text-uppercase к атрибуту класса ввода.

one of the simple way is,
<input type="text" ng-model="test" ng-change="upper(test)/>

just do below 2 line code in your js file,
$scope.upper = function(test){
$scope.test = test.toUpperCase();
}

вот моя скрипка http://jsfiddle.net/mzmmohideen/36qp9ekL/299/

это не будет работать вообще.

ng-model для указания, какое поле / свойство из области должно быть привязано к модели. Кроме того,ng-model не принимает выражение в качестве значения. выражения в angular.js-это вещи между {{ и }}.

на uppercase фильтр может использоваться в выходных данных и везде, где разрешены выражения.

вы не можете делать то, что хотите, но вы можете использовать CSS text-transform по крайней мере отображать все в верхнем регистре.

если вы хотите получить значение из текстового поля прописными буквами вы можете достичь этого с помощью специального кода JavaScript.

в вашем контроллере:

$scope.$watch('test', function(newValue, oldValue) {
  $scope.$apply(function() {
    $scope.test = newValue.toUpperCase();
  }
});

Не забудьте включить 'ngSanitize' в ваш модуль!

app.directive('capitalize', function() {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel',
        link : function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
                if(inputValue) {
                    var capitalized = inputValue.toUpperCase();
                    if (capitalized !== inputValue) {
                        modelCtrl.$setViewValue(capitalized);
                        modelCtrl.$render();
                    }
                    return capitalized;
                }
            };
            modelCtrl.$parsers.push(capitalize);
            capitalize(scope[attrs.ngModel]); // capitalize initial value
        }
    };

});

• обратите внимание на "?"в" требуют:'?ngModel',"... только тогда сработало мое заявление.

• " if (inputValue) {...}" Не определено ошибка

Это просто альтернатива, вы можете использовать это "text-transform: capitalize ;" в вашем css, и текстовая запись будет капитализирована. если только пользователь не вводит его заглавными буквами везде.

Это просто альтернатива ^^

чтобы улучшить ответ Карл Zilles Это мой пересмотр его решения. В моей версии заполнитель не изменяется на верхний регистр и также работает, если вы хотите сделать регулярное выражение в строке. Он также принимает "тип" входной строки (null или undefined или empty):

var REGEX = /^[a-z]+$/i;
myApp.directive('cf', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.cf = function(modelValue, viewValue) {
            ctrl.$parsers.push(function(input) {
                elm.css("text-transform", (input) ? "uppercase" : "");
                return input ? input.toUpperCase() : input;
            });
            return (!(ctrl.$isEmpty(modelValue)) && (REGEX.test(viewValue)));
        }
    }
}
});

решение со смещением курсора fix

.directive('titleCase', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, modelCtrl) {
                var titleCase = function (input) {
                    let first = element[0].selectionStart;
                    let last = element[0].selectionEnd;
                    input = input || '';
                    let retInput = input.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
                    if (input !== retInput) {
                        modelCtrl.$setViewValue(retInput);
                        attrs.ngModel = retInput;
                        modelCtrl.$render();
                        if (!scope.$$phase) {
                            scope.$apply(); // launch digest;
                        }
                    }
                    element[0].selectionStart = first;
                    element[0].selectionEnd = last;
                    return retInput;
                };
                modelCtrl.$parsers.push(titleCase);
                titleCase(scope[attrs.ngModel]);  // Title case  initial value
            }
        };
    });

Я бы просто использовал сам фильтр в контроллере:

 $filter('uppercase')(this.yourProperty)

просто имейте в виду, что если вы собираетесь использовать его внутри контроллера, например, вам нужно внедрить этот фильтр:

app.controller('FooController', ['$filter', function($filter) ...