如何在AngularJS中大写和大写？答案

【问题标题】：How to capitalize and uppercase in AngularJS?如何在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 选择器来呈现数据

标签： html css angularjs capitalize

【解决方案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

【讨论】：