Angular实现点击按钮下划线效果，规避控制器DOM操作

你尝试用ng-class绑定的思路完全符合Angular避免直接DOM操作的最佳实践，报错是因为未将修改后的JS逻辑完整整合到控制器中，以下是正确的实现方案：

完整代码示例 #

CSS（保持原有样式） #

.underline {
  text-decoration: underline;
}

HTML 模板 #

<div ng-app="myApp" ng-controller="MyController" >
    <button ng-class="{ 'underline': selectedItem === test.a }" ng-click="onClick(test.a)">{{test.a.name}}</button>
    <button ng-class="{ 'underline': selectedItem === test.b }" ng-click="onClick(test.b)">{{test.b.name}}</button>
    <button ng-class="{ 'underline': selectedItem === test.c }" ng-click="onClick(test.c)">{{test.c.name}}</button>
</div>

JavaScript 控制器 #

var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
    $scope.test = {
        a: {name: "aaa"},
        b: {name: "bbb"},
        c: {name: "ccc"}
    };
    // 初始化选中状态变量
    $scope.selectedItem = null;
    
    $scope.onClick = function (item) {
        // 仅更新选中状态的业务逻辑，无DOM操作
        $scope.selectedItem = item;
    };
});

核心逻辑说明 #

• 用selectedItem变量跟踪当前点击的按钮对应对象，通过ng-class的条件判断动态绑定样式：当按钮对应的对象与selectedItem相等时，自动添加underline类。
• 控制器仅负责维护选中状态的业务数据，完全脱离DOM操作，符合Angular数据驱动视图的设计理念。

内容的提问来源于stack exchange，提问作者Murmulodi