我试过使用大写过滤器，但它不起作用。我试过两种方法：
<input type="text" ng-model="test" uppercase/>
和
<input type="text" ng-model="{{test | uppercase}}"/>
第二个触发一个javascript错误：
语法错误：令牌“测试”是意外的，期待 [:]
当用户在文本框中键入时，我希望文本被强制为大写。
我怎样才能做到这一点？
问问题
101157 次
14 回答
106
请参阅下面的另一个答案，它优于这个答案。
这个答案基于这里的答案：如何在 AngularJS 的输入字段中自动大写第一个字符？.
我想你想要的是这样的解析器函数：
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) {
// see where the cursor is before the update so that we can set it back
var selection = element[0].selectionStart;
modelCtrl.$setViewValue(capitalized);
modelCtrl.$render();
// set back the cursor after rendering
element[0].selectionStart = selection;
element[0].selectionEnd = selection;
}
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>于 2013-05-05T20:09:10.773 回答
67
如果有人试图在现有字符串的开头输入小写字母，则接受的答案会导致问题。每次按键后光标移动到字符串的末尾。这是一个解决所有问题的简单解决方案：
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/
于 2014-09-23T18:15:49.097 回答
35
这个想法是在客户端将字符串显示（而不是转换）为大写，并在服务器端转换为大写（用户始终可以控制在客户端发生的事情）。所以：
1）在html中：
<input id="test" type="text" ng-model="test">
这里没有大写转换。
2）在CSS中：
#test {text-transform: uppercase;}
数据显示为大写，但实际上仍为小写，如果用户输入小写。3) 插入数据库时，在服务器端将字符串转为大写。
= = = = = 玩转的，可以试试follow:
<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 方式。
于 2014-09-16T08:41:26.443 回答
29
您不能对 ng-model 进行过滤，因为它必须是可分配的。解决方法是解析器，或者只是 ng-change。
<input ng-model="some" ng-change="some = (some | uppercase)" />
这应该有效。
于 2017-02-20T02:07:20.903 回答
17
与 Bootstrap 一起使用时，只需添加text-uppercase到输入的类属性。
于 2015-01-02T10:51:19.737 回答
6
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();
}
于 2015-05-19T07:40:58.420 回答
2
这根本行不通。
ng-model用于指定范围中的哪个字段/属性应绑定到模型。此外，ng-model不接受表达式作为值。angular.js 中的表达式介于{{和之间}}。
过滤器可以在输出和允许表达式的uppercase任何地方使用。
你不能做你想做的事，但你可以使用 CSStext-transform至少以大写显示所有内容。
如果您想以大写字母显示文本字段的值，您可以使用一些自定义 JavaScript 来实现。
在您的控制器中：
$scope.$watch('test', function(newValue, oldValue) {
$scope.$apply(function() {
$scope.test = newValue.toUpperCase();
}
});
于 2013-05-05T20:05:42.963 回答
2
不要忘记在您的模块中包含“ 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
}
};
});
注意“？” 在 "require: ' ?ngModel ',"... 只有这样我的应用程序才能工作。
"if(inputValue) {...}" 因为没有发生未定义的错误
于 2014-07-30T21:29:09.647 回答
1
使用引导程序时：
第一种方法：使用类 text-uppercase
<input type="text" class="text-uppercase" >
第二种方法：使用可以与现有类一起应用的样式
<input type="text" class="form-control" style="text-transform: uppercase;">
这是我的 stackBlitz：https ://angular-nvd7v6forceuppercase.stackblitz.io
于 2019-04-17T09:01:56.930 回答
0
这只是一种选择，您可以在您的 CSS 中使用此“文本转换：大写；”，文本条目将被大写。除非用户在任何地方都用大写字母键入它。
它只是一个替代品^^
于 2015-01-25T00:21:08.377 回答
0
为了改进Karl Zilles的答案，这是我对他的解决方案的修订。在我的版本中，占位符不会更改为大写，如果您想对字符串执行正则表达式，也可以使用。它还采用输入字符串的“类型”（空或未定义或空）：
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)));
}
}
}
});
于 2015-09-24T07:55:45.793 回答
0
光标移位修复的解决方案
.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
}
};
});
于 2018-06-19T12:52:26.517 回答
0
如果要更改模型和值，请使用：
angular.module('MyApp').directive('uppercased', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.bind("blur change input", function () {
ngModel.$setViewValue($(this).val().toUpperCase());
$(this).val($(this).val().toUpperCase());
});
element.css("text-transform","uppercase");
}
};
});
然后将大写字母添加到您的 html 输入文本中
<input type="text" uppercased />
于 2020-06-02T01:49:50.123 回答
-1
我只会在控制器中使用过滤器本身：
$filter('uppercase')(this.yourProperty)
请记住，例如，如果您要在控制器中使用它，则需要注入此过滤器：
app.controller('FooController', ['$filter', function($filter) ...
于 2015-11-04T22:56:37.780 回答