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?

Answer 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">