Toggle a text font using AngularJS

Question

I am trying to using ng class ternary operator to toggle class when a check box is selected.

Here is the simple code: http://jsfiddle.net/vqmua1x2/

I am expecting text content to turn bold and unbold when check box is selected.

I am not able to find what is my mistake.

HTML code:

<div ng-app="myApp">
<div ng-controller="Ctrl1">
    <header>
            <h1>Problems</h1>

    </header>
    <div id="problems">
        <table>
            <tr>
                <td>
                    <input type="checkbox" ng-model="val1"/>
                </td>
                <td>prob1</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" ng-model="val2"/> 
                </td>
                <td>prob2</td>
            </tr>
        </table>
    </div>

<div>
    <header>
            <h1>Orders</h1>

        <ul>
            <li ng-class="{{val1 }}? 'bold' : 'unbold'">prob1</li>
            <li ng-class="{{val2 }}? 'bold' : 'unbold'">prob2</li>
        </ul>
    </header>
</div>
     </div>

Javascript:

var myApp = angular.module('myApp', []);

myApp.controller('Ctrl1', ['$scope', '$rootScope', '$window', function ($scope, $rootScope, $window) {
    $scope.val1 = false;
    $scope.val2 = false;   
}]);

CSS:

.bold {
    font-style:none;
    font-weight:bold;
}
.unbold {
    font-style:none;
    font-weight:bold;
}

The first problem with your fiddle is you haven't even bootstrapped Angular correctly, there are errors in the console. The answer may be something like ng-class="{bold:val1}" but I haven't tested. Edit: updated your fiddle, that is the answer. jsFiddle — Tom
– Tom, Commented Jan 21, 2015 at 19:24

Nikos Paraskevopoulos · Accepted Answer · 2015-01-21 19:27:47Z

2

For the fiddle to work, select "no wrap - in body"

The correct syntax for ng-class is:

<li ng-class="{ 'bold': val1, 'unbold': !val1 }">prob1</li>

With these changes the fiddle works: http://jsfiddle.net/hpwhb62d/

answered Jan 21, 2015 at 19:27

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom · Accepted Answer · 2015-01-21 19:28:28Z

1

The first problem with your fiddle is you haven't even bootstrapped Angular correctly, there are errors in the console.

Secondly, check the documentation for ng-class here - your javascript is not correct.

The ng-class could look like this:

<ul>
    <li ng-class="{bold:val1}">prob1</li>
    <li ng-class="{bold:val2}">prob2</li>
</ul>

jsFiddle

answered Jan 21, 2015 at 19:28

Tom

7,7401 gold badge26 silver badges49 bronze badges

Comments

maxisam · Accepted Answer · 2015-01-21 19:30:49Z

1

Should be like this.

<li ng-class="val1 ? 'bold' : 'unbold'">prob1</li>

edited Jan 21, 2015 at 19:30

answered Jan 21, 2015 at 19:24

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

Collectives™ on Stack Overflow

Toggle a text font using AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related