使用 AngularJS 切换文本字体

Toggle a text font using AngularJS

本文关键字：文本 字体 AngularJS 使用      更新时间：2023-09-26

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

下面是简单的代码： http://jsfiddle.net/vqmua1x2/

我希望选中复选框时文本内容将变为粗体和不加粗。

我找不到我的错误是什么。

网页代码：

<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;
}
  • 要使小提琴工作，请选择"无包装 - 主体"

  • ng-class的正确语法是：

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

通过这些更改，小提琴起作用：http://jsfiddle.net/hpwhb62d/

你的小提琴的第一个问题是你甚至没有正确引导 Angular，控制台中有错误。

其次，在此处查看ng-class文档 - 您的 javascript 不正确。

ng-class可能如下所示：

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

js小提琴

应该是这样的。

<li ng-class="val1 ? 'bold' : 'unbold'">prob1</li>
相关文章：