Как заглавные буквы и прописные буквы в AngularJS?

Я хочу использовать заглавные буквы в верхнем регистре некоторых полей в форме HTML.Как заглавные буквы и прописные буквы в AngularJS?

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 представляется, капитализация не сохраняется.

Я использую Угловой контроллер/услугу для отправки данных на мой сервер. Должен ли я редактировать данные на моем контроллере, или я могу сохранить капитализацию CSS?

Спасибо! :)

источник

2015-06-11 Mistalis

CSS не физически изменить форму. он просто меняет, как он отображается. если вы хотите изменить фактические символы в полях формы, вам нужно будет использовать javascript. –

, как указано выше, или проанализировать значения в вашем бэкэнд для использования заглавной буквы/прописной буквы. Я не уверен, в чем польза от этого: вы всегда можете представить данные с теми же селекторами CSS, которые вы добавили в свои поля ввода – Luca

Вот решение. Добавить в контроллер эти 2 новые функции:

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

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

В $scope.submit(), Вы можете преобразовать ПгвЬЫате/LastName как следующее:

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

источник

2015-06-22 11:15:24 Mistalis

Вы не можете этого сделать без фактического изменения значений полей с помощью javascript в контроллере/службе после отправки формы. Css только изменяет внешний вид/пользовательский интерфейс на странице, но не фактическое значение.

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="[email protected]" 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>

источник

2015-06-11 14:58:31 ShankarSangoli

Для HTML это потому, что CSS только стили так что-то вроде текста преобразования: прописные буквы; будет только визуальным.

Чтобы он зарегистрирован как прописные вам нужно отформатировать его с ServerSide как PHP, и вы можете отправить форму, чтобы затем получить данные с POST и использовать что-то вроде

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

источник

2015-06-11 15:07:20 keikoku92

Вы должны убедиться в том, что модель всегда имеют верхнюю строку. В вашем коде вы не меняете значение модели, вместо этого вы форматируете значение ввода, которое должно быть в верхнем регистре.

Вы можете использовать директиву, чтобы изменить значение ввода, прежде чем назначать его модели. Для выполнения таких задач вы можете зарегистрировать функции в свойстве 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

источник

2015-06-11 15:15:24

Вы можете создать директиву текста трансформирует:

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

источник

2017-04-28 08:53:59

Как заглавные буквы и прописные буквы в AngularJS?

ответ

Смежные вопросы