Angularjs md-button words kapitalisieren

Ich habe einige md-Tasten auf diese Weise unten, aber leider das zweite Wort innerhalb von Tags nicht groß geschrieben, wenn es mehr als ein Wort gibt.Angularjs md-button words kapitalisieren

<md-button ui-sref="DMmain"> 
    <i class="fa fa-cog fa-2x"></i> 
    <h3>Device Management</h3> 
</md-button> 
<md-button ui-sref="ARmain"> 
    <i class="fa fa-lock fa-2x"></i> 
    <h3>Access Rules</h3> 
</md-button> 
<md-button ui-sref="UMmain"> 
    <i class="fa fa-user fa-2x"></i> 
    <h3>User Management</h3> 
</md-button> 
<md-button> 
    <i class="fa fa-file-text fa-2x"></i> 
    <h3>Account Profile</h3> 
</md-button>

Der Effekt ist wie dieses Bild unten,

<i class> eine Bibliothek Font Ehrfürchtig genannt ist, dass ich nur für Symbole verwendet. Vielen Dank im Voraus für Ideen, wie Sie dieses Problem lösen können.

EDITED & GELÖST: text-transform: capitalize !important; für md-button tun funktioniert nicht wirklich. Sie müssen die Klasse auf die Tags setzen, die Sie bearbeiten möchten, und text-transform: capitalize; zu Ihrer Klasse in der CSS-Datei hinzufügen.

Quelle

2016-07-07 Shurui Liu

Leider müssen Sie die CSS außer Kraft setzen, dies zu erreichen, wie folgt:

(function() { 
 
    "use strict"; 
 
    angular.module('app', ['ngAnimate', 'ngMaterial', 'ngAria']) 
 
    .controller('mainCtrl', function($scope) { 
 

 
    }); 
 
})();

.capitalize-button { 
 
    text-transform: capitalize; 
 
} 
 

 
/* 
 
OR just override the .md-button class in your css. 
 

 
.md-button { 
 
    text-transform: capitalize !important; 
 
} 
 
*/

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-aria.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css"> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <md-button ui-sref="DMmain"> 
 
    <i class="fa fa-cog fa-2x"></i> 
 
    <h3 class="capitalize-button">device management</h3> 
 
</md-button> 
 
<md-button ui-sref="ARmain"> 
 
    <i class="fa fa-lock fa-2x"></i> 
 
    <h3 class="capitalize-button">access rules</h3> 
 
</md-button> 
 
<md-button ui-sref="UMmain"> 
 
    <i class="fa fa-user fa-2x"></i> 
 
    <h3 class="capitalize-button">user management</h3> 
 
</md-button> 
 
<md-button> 
 
    <i class="fa fa-file-text fa-2x"></i> 
 
    <h3 class="capitalize-button">account profile</h3> 
 
</md-button> 
 
</body> 
 

 
</html>

Ich hoffe, es hilft !!

Quelle

2016-07-08 03:35:33 developer033

"use strict" wird meine Angular App nicht auf der Webseite erscheinen lassen, ich weiß nicht warum ... Ansonsten funktioniert alles gut. Vielen Dank! –

** "use strict"; ** Definiert, dass JavaScript-Code im "strict mode" ausgeführt werden soll. Sie können es hier überprüfen: http://www.w3schools.com/js/js_strict.asp, mit anderen Worten, es ist nur eine gute Praxis .. – developer033

"use strict" macht meine Webseiten verschwinden (gibt eine ganze leere Seite) wenn Ich habe jeden Code gemacht, der nicht "streng" ist. Ich denke, es ist ein Werkzeug, das uns hilft, Code mit hoher Qualität zu schreiben. –

Angularjs md-button words kapitalisieren

Antwort

Verwandte Themen