Question

我想在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大小写？

谢谢！：）

Answer 1

如果在提交表单后使用控制器/服务中的javascript实际更改字段值，则无法执行此操作。 Css仅更改页面上的外观/ UI，但不更改实际值。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

＆＃13;

/* Put your css in here */

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

＆＃13;

<!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>

＆＃13;

Answer 2

对于html，这是因为css只对它进行样式设置，如text-transform：uppercase;只会是视觉的。

要将其注册为大写，您需要使用服务器端将其格式化为php，然后您可以发送表单然后使用POST获取数据并使用类似

的内容

 $_POST = array_map("strtoupper", $_POST);

Answer 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;

你可以在这里看到一个有效的插件：http://plnkr.co/edit/A0gaPkAnPXWq8Od6RI9f?p=preview

Answer 4

这是一个解决方案。将2个新功能添加到您的控制器：

function upperCase(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

function capitalize(str) {
    return str.toUpperCase();    
}

在$scope.submit()中，您可以将firstname / lastname转换为以下内容：

$scope.submit = function() {
    ...
    $scope.firstname = upperCase($scope.firstname);    
    $scope.lastname = capitalize($scope.lastname);
}

Answer 5

您可以创建指令文本转换：

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中大写和大写？

5 个答案: