In Angular use ng-bind in class

Question

In Angular I can write next :

class="{{ DayTypesClasses[request.typeId] }}"

which will set css-class according to expression value

But I've found that ng-bind can make the same but also save some time for this binding.

I've tried to use ng-bind in class, but it won't work.

class="ng-bind : 'DayTypesClasses[request.typeId]'"
class="ng-bind = 'DayTypesClasses[request.typeId]'"
class="ng-bind : DayTypesClasses[request.typeId]"
class="ng-bind:{{DayTypesClasses[request.typeId]}}"

How correctly should I use ng-bind in class-attribute?

Link on documentation of ng-bind doesn't help me :(

did you try `class="ng-bind : {{ DayTypesClasses[request.typeId] }}`"? — hard coder, Apr 14 '16 at 11:07
@sarvesh - it returns something like `class="ng-bind:dayoff"` but should be `class="dayoff"` — demo, Apr 14 '16 at 11:09
_"I've found that ng-bind can make the same"_ You only need to read the first sentence of the documentation to understand that this is not true. — a better oliver, Apr 14 '16 at 11:27

score 2 · Accepted Answer · answered Apr 14 '16 at 11:14

2

You could use ng-class, either

<ANY ng-class="expression"> ... </ANY>

or

<ANY class="ng-class: expression;"> ... </ANY>

For example:

<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Some example</p>

answered Apr 14 '16 at 11:14

C14L

12,153
4
39
52

Hah, yes, this helps :) – demo Apr 14 '16 at 11:16

score 1 · Answer 2 · edited May 23 '17 at 12:01

What you're expecting is to replace value of the $scope variable to class and for that you can use ng-class. You are just misunderstood the concept. ng-bind is a directive which you can use in different ways which add the content of your $scope varible to that tag insted of the attribute value.

You can see in below code, I've used ng-class in both ways. More about ng-class

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">

     <span class="ng-class:myClass">Demo text</span>
     <span ng-class="myClass">Demo text</span>
  </div>
</div>

JSFiddle

score 0 · Answer 3 · answered Apr 14 '16 at 11:10

this is on the standard example and is working:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example61-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>



</head>
<body ng-app="bindExample">
  <script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span class="ng-bind: name"></span>!
</div>
</body>
</html>

Plunker

Emm, this example doen't bind something like css-class, instead it adds `Whirled` to `Hello` — demo, Apr 14 '16 at 11:15
then you should probably use the ng-class directive: https://docs.angularjs.org/api/ng/directive/ngClass — thegio, Apr 14 '16 at 11:16

In Angular use ng-bind in class

3 Answers3