我试过使用大写过滤器,但它不起作用。我尝试过两种方式:
<input type="text" ng-model="test" uppercase/>
和
<input type="text" ng-model="{{test | uppercase}}"/>
第二个触发javascript错误:
语法错误:令牌'test'是意外的,期待[:]
我希望文本在用户在文本框中键入时强制为大写。
我怎样才能做到这一点?
请参阅下面的其他答案,该答案优于此答案。
这个答案基于这里的答案:How to autocapitalize the first character in an input field in 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>
它只是一个替代方案,你可以在你的css中使用这个“text-transform:capitalize;”,文本条目将被大写。除非用户在任何地方用大写字母键入它。
它只是一个替代^^
为了改善Karl 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)));
}
}
}
});
光标移位修复解决方案
.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) ...
如果有人试图在现有字符串的开头输入小写字母,则接受的答案会导致问题。每次按键后光标移动到字符串的末尾。这是解决所有问题的简单解决方案:
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");
}
};
})
我们的想法是在客户端将字符串显示(不转换)为大写,并在服务器端转换为大写(用户可以始终控制客户端发生的事情)。所以:
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-model上进行过滤,因为它必须是可分配的。解决方法是解析器,或简单地ng-change。
<input ng-model="some" ng-change="some = (some | uppercase)" />
这应该工作。
与Bootstrap一起使用时,只需将text-uppercase
添加到input的class属性即可。
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
不接受表达式作为值。 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
}
};
});
使用bootstrap时: 第一种方法:使用class text-uppercase
<input type="text" class="text-uppercase" >
第二种方法:使用可以应用于现有类的样式
<input type="text" class="form-control" style="text-transform: uppercase;">