javascript - 使用 AngularJS 切换文本字体

Question

我正在尝试使用 ng 类三元运算符在选中复选框时切换类。

这是简单的代码:http://jsfiddle.net/vqmua1x2/

我希望文本内容在选中复选框时变为粗体和非粗体。

我找不到我的错误。

HTML代码:

<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;
}

Answer 1

• 要使 fiddle 正常工作，请选择“不包裹在正文中”

• ng-class 的正确语法是:

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

有了这些变化， fiddle 就可以工作了:http://jsfiddle.net/hpwhb62d/