html - 如何在AngularJS中大写和大写?

标签 html css angularjs capitalize

我想将 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 /服务将数据发送到我的服务器。我应该在我的 Controller 上编辑数据,还是可以保留 CSS 大写?

谢谢! :)

最佳答案

提交表单后,如果不使用 Controller /服务中的 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>

关于html - 如何在AngularJS中大写和大写?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30784252/

相关文章:

html - 自定义 Font Awesome CSS

html - Thymeleaf - 使用多个片段进行布局的 div 类的正确顺序是什么?

html - 什么是 url 编码 %2526?

javascript - 如何使用 JQuery 获取 HTML 元素数组中的 HTML 元素

html - 为什么 html 元素的宽度没有设置为页面的 100%?

javascript - 如何在一页滚动主插件的每一页(部分)上突出显示菜单链接?

CSS如何获得相同的高度?

javascript - 将 NodeJS 与 Angular 集成的最佳方式

javascript - 在底部滚动

javascript - 将值设置为下拉按钮