如何在AngularJS中大写和大写？
Posted
技术标签:
【中文标题】如何在AngularJS中大写和大写？【英文标题】：How to capitalize and uppercase in AngularJS? 【发布时间】：2015-08-27 08:28:13 【问题描述】：我想将 html 表单中的某些字段大写/大写。
HTML
<form role="form" ng-submit="submit()">
<input type="text" class="capitalize" ng-model="first"/>
<input type="text" class="uppercase" ng-model="last"/>
<button type="submit"></button>
</form>
CSS
.uppercase
text-transform: uppercase;
.capitalize
text-transform: capitalize;
当我在字段上输入数据时效果很好，但是当form 提交时，不保留大写。
我使用 Angular 控制器/服务将数据发送到我的服务器。我应该在控制器上编辑数据，还是可以保留 CSS 大写？
谢谢！ :)
【问题讨论】：
css 不会物理地改变表单。它只是改变了它的显示方式。如果要更改表单字段中的实际字符，则需要使用 javascript。 如上所述 - 或解析后端中的值以大写/大写。我不确定这样做有什么好处 - 您始终可以使用添加到输入字段中的相同 CSS 选择器来呈现数据 【参考方案1】：提交表单后，如果不使用控制器/服务中的 javascript 实际更改字段值，您将无法做到这一点。 Css 只会改变页面上的外观/UI，但不会改变实际值。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope)
$scope.name = 'World';
);/* Put your css in here */
.uppercase
text-transform: uppercase;
.capitalize
text-transform: capitalize;
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0/angular.js" data-semver="1.4.0"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form role="form" ng-submit="submit()">
<input type="text" class="capitalize" id="firstname" ng-model="first"/>
<input type="text" class="uppercase" id="lastname" ng-model="last"/>
<button type="submit"></button><
</form>
<button onclick="$('#firstname').removeClass('capitalize')">Remove Capitalize</button>
<button onclick="$('#lastname').removeClass('uppercase')">Remove Uppercase</button>
</body>
</html>【讨论】：
【参考方案2】：对于 html，这是因为 css 仅对其进行样式设置，例如 text-transform: uppercase;只会是视觉的。
要将其注册为大写，您需要使用服务器端将其格式化为 php，然后您可以发送表单，然后使用 POST 获取数据并使用类似
$_POST = array_map("strtoupper", $_POST);
【讨论】：
【参考方案3】：您必须确保模型始终具有大写字符串。在您的代码中，您没有更改模型值，而是将输入的值格式化为大写。
在将输入分配给模型之前，您可以使用指令来修改输入的值。要执行此类任务，您可以在 ngModel 的 $parsers 属性中注册函数。你可以使用这样的东西：
angular.module("myModule")
.directive("toUppercase", toUppercase)
function toUppercase()
function parser(value)
return value ? value.toUpperCase() : value;
return
require: 'ngModel',
link: function (scope, elm, attr, ngModel)
ngModel.$parsers.push(parser);
使用此指令，您可以将 css 定位到指令属性：
[to-uppercase]: text-transform: uppercase;
你可以在这里看到一个有效的 plunkr：http://plnkr.co/edit/A0gaPkAnPXWq8Od6RI9f?p=preview
【讨论】：
【参考方案4】：这里有一个解决方案。 将这 2 个新功能添加到您的控制器：
function upperCase(str)
return str.charAt(0).toUpperCase() + str.slice(1);
function capitalize(str)
return str.toUpperCase();
在$scope.submit()中，您可以将名字/姓氏转换如下：
$scope.submit = function()
...
$scope.firstname = upperCase($scope.firstname);
$scope.lastname = capitalize($scope.lastname);
【讨论】：
【参考方案5】：你可以创建一个指令text-transforms：
app.directive('textTransforms',['$parse',function($parse)
return
restrict:'A',
require:'^ngModel',
scope:
value:'=ngModel',
caseTitle:'@textTransforms'
,
link:function postLink(scope, element, attrs)
scope.$watch('value',function(modelValue,viewValue)
if(modelValue)
var newValue;
switch(scope.caseTitle)
case 'uppercase':
newValue = modelValue.toUpperCase();
break;
case 'lowercase':
newValue = modelValue.toLowerCase();
break;
case 'capitalize':
newValue = modelValue.charAt(0).toUpperCase() + modelValue.slice(1);
break;
default:
newValue = modelValue;
$parse('value').assign(scope,newValue);
);
;
]);
您可以按如下方式使用上述指令：
<input type="text" text-transforms="capitalize" ng-model="first"/>
<input type="text" text-transforms="uppercase" ng-model="last"/>
我还创建了一个 plunk： https://plnkr.co/edit/AoW8MuoCJWnbRtg25LJE?p=preview
【讨论】：
以上是关于如何在AngularJS中大写和大写？的主要内容，如果未能解决你的问题，请参考以下文章