How to capitalize and uppercase in AngularJS?

问题

I want to capitalize/uppercase some fields in a HTML form.

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

When I enter data on the fields it works well, but when form is submitted, capitalization is not preserved.

I use an Angular controller/service to send data to my server. Should I edit data on my controller, or could I keep the CSS capitalization ?

Thanks! :)

回答1:

For the html this is because css only styles it so something like text-transform: uppercase; will only be visual.

To have it registered as uppercase you need to format it with a serverside as php and you could send your form to then get the data with POST AND use something like

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

回答2:

You cannot do that without actually change the field values using javascript in your controller/service once you submit the form. Css only changes the appearance/UI on the page but not the actual value.

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>

回答3:

You must ensure that the model have always an uppercased string. In your code you are not changing the model value, instead, you are formatting the value of the input to be uppercased.

You could use a directive to modify the value of the input before assigning it to the model. To do this kind of tasks you can register functions in the $parsers property of ngModel. You may use something like this:

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);
    }
  }
}

Using this directive, you can target your css to the directive attribute:

  [to-uppercase]: text-transform: uppercase;

You can see a working plunkr here: http://plnkr.co/edit/A0gaPkAnPXWq8Od6RI9f?p=preview

回答4:

Here is a solution. Add to your controller those 2 new functions:

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

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

In $scope.submit(), You can transform the firstname/lastname as following:

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

回答5:

You can create a directive 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);
        }
      });
    }
  };
}]);

You can use above directive as follows:

<input type="text" text-transforms="capitalize" ng-model="first"/>
<input type="text" text-transforms="uppercase" ng-model="last"/>

I have also created a plunk: https://plnkr.co/edit/AoW8MuoCJWnbRtg25LJE?p=preview

来源：https://stackoverflow.com/questions/30784252/how-to-capitalize-and-uppercase-in-angularjs

标签

html

css

angularjs

capitalize