Question

我有一个文本，例如：＆＃34; Ram是24公斤＆＃34;

本文基于一些计算而来。这些计算我在我的angularjs控制器中进行。我想为这些文本设置样式，如＆＃34; Ram is＆＃34;在面积字体和＆＃34; 24公斤＆＃34;是红色的新罗马字体。如何使用angularjs

实现这一目标

在javascript中我们可以使用innerhtml。但我怎样才能在angularjs

中实现这一点

这是我的示例代码

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>

控制器

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
 }

您将需要ngSanatize js文件

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

Answer 2

我会更多地使用Angular的诱人功能 - 完全保留你的HTML文件。我刚刚使用了一个控制器来实现这个例子，但是如果这是一个HTML片段你将重新使用它，它属于一个指令/组件（取决于你使用的是什么版本的Angular））。

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>

Answer 3

您必须将ng-style添加到html元素。

使用此指令，您可以从控制器设置样式。

代码是这样的：

<h2 ng-style="myStyle"/>

在您的控制器中设置

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

您可以在角度doc中找到更多信息。

如何在角度js

3 个答案: