wie Schriftart in angular geben js

Question

Ich habe einen Text für zB: "Ram ist 24 kg"

Dieser Text basiert auf einigen Berechnungen. Diese Berechnung mache ich in meinem angularjs controller.Ich möchte Styling für diesen Text wie "Ram ist" in Flächentext und "24 kg" ist in roter Farbe mal neue römische Schriftart geben. Wie kann ich dies erreichen mit angularjs

In Javascript können wir innerhtml verwenden. Aber wie kann ich dies implementieren in AngularJS

hier ist mein Beispielcode

if(condition) 
    name = $scope.somevalue1 
else if(condition) 
name = $scope.somevalue2 
else 
name = $scope.somevalue3 

$scope.resultname = name; 

if(condition) 
    weight = $scope.weightvalue1 
else if(condition) 
    weight = $scope.somevalue2 
else 
    weight = $scope.somevalue3 

$scope.resultname = $scope.resultname+" is"+ weight; 

if(condition) 
    mess= $scope.messvalue1 
else if(condition) 
    mess = $scope.messvalue2 
else 
    mess = $scope.messvalue3 

$scope.resultname = $scope.resultname+" "+ mess 

Answer 1

html

<span id="output"></span> 
<section ng-app="myApp"> 
<article ng-controller="MyCtrl"> 
<p ng-bind-html="resultname"></p> 
</article> 
</section> 

-Controller

angular.module('controllers', []); 
angular.module('myApp', ['controllers','ngSanitize']);  
angular.module('controllers').controller('MyCtrl', function ($scope){ 
$scope.resultname= 'Ram is <span class="myStyle">24</span>kg' 
}); 

CSS

.myStyle{ 
    color:red 
} 

Sie benötigen ngSanatize js Datei

https://code.angularjs.org/1.2.1/angular-sanitize.min.js

Answer 2

Sie haben ng-Stil hinzuzufügen Element in HTML.

Mit dieser Direktive können Sie Stil von Ihrem Controller einstellen.

-Code ist wie folgt:

<h2 ng-style="myStyle"/> 

Und in Ihrem Controller setzen Sie

$scope.myStyle = "{'background-color':'blue'}" 

Weitere Informationen, die Sie in Winkel doc finden.

Answer 3

Ich würde Angulars verlockende Funktionen stärker nutzen - halte deinen HTML-Code vollständig von deinen JS-Dateien fern. Ich habe gerade einen Controller für dieses Beispiel verwendet, aber wenn dies ein HTML-Ausschnitt ist, den du wiederverwendest, gehört es in eine Direktive/Komponente (abhängig davon, welche Version von Angular du verwendest).

angular.module('demo', []) 
 
    .controller('demoCtrl', ['$scope', function($scope) { 
 
     $scope.name = 'Ram'; 
 
     $scope.weight = '24'; 
 
     $scope.mess = 'kg'; 
 
    } 
 
    ]);

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 
.weight { 
 
    font-family: 'Times New Roman', serif; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<main data-ng-app="demo"> 
 
    <div data-ng-controller="demoCtrl"> 
 
    <p>{{::name}} is <span class="weight">{{::weight}} {{::mess}}</span> 
 
    </p> 
 
    </div> 
 
</main>