Andrew Andrew - 2 months ago 10
AngularJS Question

Use ng-class to display some text

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

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