如何在AngularJS中大写和大写？

Question

我想 capitalize/uppercase 在 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 controller/service 将数据发送到我的服务器。我应该在控制器上编辑数据，还是可以保留 CSS 大写？

谢谢！ :)

Answer 1

提交表单后，如果不使用 controller/service 中的 javascript 实际更改字段值，则无法执行此操作。 Css 只改变页面上的 appearance/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>

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;

你可以在这里看到一个有效的 plunkr：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

您可以创建指令 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"/>

我还创建了一个插件： https://plnkr.co/edit/AoW8MuoCJWnbRtg25LJE?p=preview

如何在AngularJS中大写和大写？

How to capitalize and uppercase in AngularJS?

html

css

capitalize

angularjs