Question

＆＃13;

<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <style>
    .selected {background: #139029;}
    </style>
</head>
<body ng-controller="myCtrl">
    <div class="container-fluid">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>item1</th>
                    <th>item2</th>
                    <th>item3</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in [1,2,3]">
                    <td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" my-td >{{item}}</td>
                </tr>
            </tbody>
        </table>
        <button class="btn btn-danger btn-block" ng-click="reset();">重置表格</button>
    </div>
</body>
<script src="lib/angular.1.5.5.min.js"></script>
<script src="lib/jquery.2.2.2.min.js"></script>
<script src="src/resetTable.js"></script>
</html>

＆＃13;

PowerInt

＆＃13;

int

＆＃13;

我点击按钮重置课不起作用，为什么？谁能告诉我非常感谢!!

Answer 1

您不需要该指令（并且您不需要自己操纵DOM）。 ng-class本身就是一个内置的指令，可以做到这一点。

只需删除myTd指令并将您的元素更改为：

<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" ng-click="selectClass = !selectClass" >{{item}}</td>

Answer 2

实际上，您希望通过保留指令来实现您的要求是从表行中删除类selected

为此，修改重置功能如下

$scope.reset = function(){      
    $('.selected').removeClass('selected');
}

此函数选择具有类名selected的所有元素，并将从这些元素中删除该类

angularjs ng-class在表ng-repeat中不起作用

2 个答案: