Use ng-class to display some text

Question

Can I use ng-class to display text in addition to a temporary class on my div?

Here's my code.

HTML:

<button ng-click="setBulkMode()"

<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode}">

JS:

$scope.setBulkMode = function() {
                if(!$scope.bulkMode) {
                    $scope.bulkMode = true;
                } else {
                    $scope.bulkMode = false;
                }
            };

Whenever I'm setting bulkMode to true, on my ng-class I'd like to display some text as well. So something like...

<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode 'Bulk Mode On'">

But I'm not quite sure how to do that. Any ideas?

inside the `div` you could just use `{{bulkMode?'Bulk Mode On' : ''}}` — kukkuz, Sep 16 '16 at 12:37

score 1 · Accepted Answer · answered Sep 16 '16 at 12:37

1

Try the following:

 <div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode">

 <span ng-show="bulkMode">Bulk Mode On</span>

And you dont need that function to set, you can do this easily in the view:

<button ng-click="bulkMode = !bulkMode">

answered Sep 16 '16 at 12:37

Gustavo Gabriel

1,378
2
17
28

Ok great. Now is there an easy way to have that text centered in the middle of my filter-nav-bar div? – Andrew Hummel Sep 16 '16 at 12:51
1

For this i will leave another answer: http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block – Gustavo Gabriel Sep 16 '16 at 12:55
So if I had a class just for this text: `.bulk-show { text-align: center; vertical-align: middle; }` Would that have to be within the filter-nav-bar css class? – Andrew Hummel Sep 16 '16 at 13:06

score 0 · Answer 2 · answered Sep 16 '16 at 12:37

Separate it. Create a new div with the ng-if directive to show it conditionally:

<div ng-if="bulkMode">Bulk Mode On</div>

And also, you can better write your function (personally I would rename it to toggleBulkMode):

$scope.setBulkMode = function() {
     $scope.bulkMode = !$scope.bulkMode;
};

Use ng-class to display some text

2 Answers2