AngularJS – 当值变化时突出显示DOM元素

在本文中，我们将介绍如何使用AngularJS来实现当值变化时突出显示DOM元素的效果。作为一个JavaScript框架，AngularJS提供了丰富的功能和指令，使得我们可以轻松地实现这样的效果。让我们开始吧！

使用ng-class指令

AngularJS中的ng-class指令允许我们根据表达式的结果动态地添加或移除CSS类。我们可以利用ng-class指令来实现当值变化时突出显示DOM元素的效果。以下是一个示例：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Highlight DOM</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
    <script>
        angular.module('myApp', [])
            .controller('myCtrl', function ( $scope) {$ scope.value = '';

                // 用于更新值的函数
                 $scope.updateValue = function (newValue) {$ scope.value = newValue;
                };
            });
    </script>
</head>
<body ng-controller="myCtrl">
    <input type="text" ng-model="value" ng-class="{'highlight': value !== ''}">
    <button ng-click="updateValue('New Value')">Change Value</button>
</body>
</html>

在上面的示例中，我们通过ng-class指令将highlight类添加到输入框上，只要值不为空。当值为非空时，输入框的背景色将变为黄色。

在控制器中，我们使用$scope.value变量来保存输入框的值。通过ng-click指令绑定的updateValue函数，我们可以通过点击按钮来更改输入框的值。每当值发生变化时，ng-class指令将根据表达式的结果动态地添加或移除highlight类，从而实现突出显示的效果。

使用$watch函数

除了使用ng-class指令，我们还可以使用AngularJS中的 $watch函数来监听值的变化并添加CSS类。$ watch函数是AngularJS中非常强大和灵活的功能之一，它可以让我们监视表达式的变化并在变化时执行相应的操作。

以下是一个使用$watch函数来实现突出显示DOM元素的示例：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Highlight DOM</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
    <script>
        angular.module('myApp', [])
            .controller('myCtrl', function ( $scope) {$ scope.value = '';

                // 使用 $watch函数监听值的变化$ scope. $watch('value', function (newValue, oldValue) { if (newValue !== '') { // 值发生变化时添加highlight类 angular.element(document.querySelector('input')).addClass('highlight'); } else { // 值为空时移除highlight类 angular.element(document.querySelector('input')).removeClass('highlight'); } }); // 用于更新值的函数$ scope.updateValue = function (newValue) {
                    $scope.value = newValue;
                };
            });
    </script>
</head>
<body ng-controller="myCtrl">
    <input type="text" ng-model="value">
    <button ng-click="updateValue('New Value')">Change Value</button>
</body>
</html>

在上面的示例中，我们通过$watch函数监听$scope.value的变化。当值发生变化时，$watch函数将执行回调函数，并根据值的变化添加或移除highlight类。

在回调函数中，我们使用angular.element函数来获取输入框的DOM元素，然后使用addClass和removeClass方法来添加或移除highlight类。这样，在值不为空时，输入框的背景色将变为黄色。