angularjs在文本框中强制大写
我试过使用大写的filter，但它不工作。 我试过两种方法：
<input type="text" ng-model="test" uppercase/> 和
<input type="text" ng-model="{{test | uppercase}}"/>
第二个触发一个javascript错误：
语法错误：令牌“testing”是意外的，期待[：]
我想要文本被强制为大写，因为用户在文本框中键入。
我怎样才能做到这一点？
这个答案是基于这里的答案： 如何在AngularJS的input字段中自动填充第一个字符？ 。
我想你会想要的是这样的parsing器function：
angular .module('myApp', []) .directive('capitalize', function() { return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { var capitalize = function(inputValue) { if (inputValue == undefined) 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 } }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <input type="text" ng-model="name" capitalize> </div>
接受的答案会导致问题，如果有人试图在现有的string的开头input一个小写字母..光标移动到每个按键后的string的末尾。 这是一个解决所有问题的简单解决scheme：
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/23/
这个想法是在客户端将string显示（不转换）为大写字母，并在服务器端转换为大写字母（用户可以随时控制客户端发生的情况）。 所以：
1）在html中：
<input id="test" type="text" ng-model="test">
这里没有大写的转换。
2）在CSS中：
#test {text-transform: uppercase;}
数据显示为大写，但实际上仍然是小写，如果用户键入小写。 3）插入数据库时，将服务器端的string转换为大写字母。
= = = = =为了玩玩，可以试试看：
<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是不必要的。
与Bootstrap一起使用时，只需将text-uppercase添加到input的类属性。
你不能在ng模型上过滤，因为它必须是可分配的。 解决方法是parsing器，或简单地ng-change。
<input ng-model="some" ng-change="some = (some | 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(); }
这根本行不通。
ng-model用于指定范围中的哪个字段/属性应绑定到模型。 另外， ng-model不接受expression式作为值。 angular.js中的expression式是{{和}}之间的东西。
大uppercase滤器可以用在输出和expression式允许的任何地方。
你不能做你想做的，但你可以使用CSS的text-transform ，以至less显示大写的一切。
如果你想用大写字母来表示文本字段的值，可以用一些自定义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）{…}”为了不发生未定义的错误
这只是一个替代scheme，你可以在你的CSS中使用这个“text-transform：capitalize”，并且文本条目将被大写。 除非用户使用大写字母input。
这只是一个替代^^
为了改善卡尔·齐尔斯的答案，这是我对他的解决scheme的修改。 在我的版本中，占位符不会更改为大写，如果要对string执行正则expression式，也可以使用占位符。 它也采用inputstring的“types”（空或未定义或空）：
var REGEX = /^[az]+$/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))); } } } });
我只是在控制器中使用filter本身：
$filter('uppercase')(this.yourProperty)
只要记住，如果你打算在控制器内部使用它，例如，你需要注入这个filter：
app.controller('FooController', ['$filter', function($filter) ...
