как дать стиль шрифта в угловых JS

Question

как дать стиль шрифта в угловых JS

0

У меня есть текст, например: "Рам - 24 кг"

Этот текст поступает на основе некоторых вычислений. Эти вычисления я делаю в своем контроллере angularjs. Я хочу дать стиль для этого текста, например, "Рам" в ареальном шрифте, а "24 кг" - в красном цвете с новым римским шрифтом. Как я могу достичь этого, используя 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

Athi 02 июнь 2016, в 15:23

Источник

0

Вам необходимо использовать ngSanatize, и вы можете установить значения html в переменной области видимости. В пользовательском интерфейсе вы можете использовать ng-bind-html для связывания данных с переменной области видимости.
user3045179 02 июнь 2016, в 13:23
0

не могли бы вы объяснить с примером
user1187 02 июнь 2016, в 14:01
0

Добавлен код для вашей ссылки.
user3045179 02 июнь 2016, в 14:31

Показать ещё 1 комментарий

Теги:

javascript

angularjs

css

3 ответа

1

Я бы использовал более интенсивные возможности Angular tempting - полностью избавил ваш HTML от ваших JS файлов. Я просто использовал контроллер для этого примера, но если это фрагмент 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>

Timespace 02 июнь 2016, в 12:38

0

Вы должны добавить элемент ng-style в html.

С помощью этой директивы вы можете установить стиль с вашего контроллера.

Код выглядит так:

<h2 ng-style="myStyle"/>

И в вашем контроллере вы установили

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

Более подробную информацию вы можете найти в угловом документе.

Ygalbel 02 июнь 2016, в 11:46

Ещё вопросы

Вам необходимо использовать ngSanatize, и вы можете установить значения html в переменной области видимости. В пользовательском интерфейсе вы можете использовать ng-bind-html для связывания данных с переменной области видимости.
не могли бы вы объяснить с примером

user3045179 · Accepted Answer · 2016-06-02T13-03-00.000Z

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