如何在 ng-click 上为 AngularJS 添加类以查找多个元素(巧妙地）

How to add class in AngularJS on ng-click for multiple elements (smartly)?

本文关键字：元素 查找 ng-click 上为 AngularJS 添加      更新时间：2023-09-26

我有2个"列表"（在HTML中）。我想使我单击的任何选项都添加一个将li元素的background-color更改为红色的类。如果再次单击任何单个选项，则会删除该类（因此背景将恢复为白色）：

这是我当前 HTML 页面/模板中的列表外观：

列表 A 

<ul>
    <li>Something 1</li>
    <li>Something 2</li>
</ul>

列表 B

<ul>
    <li>Otherthing A</li>
    <li>Otherthing B</li>
    <li>Otherthing C</li>
</ul>

我目前的状态是让每个li都有自己的表达式，有自己的$scope变量来跟踪真或假。（个人$scope可变含义。 $scope.otherthingaclicked = true、$scope.otherthingbclicked = true、$scope.otherthingcclicked=false等）

<li ng-class="expression">Otherthing A</li>

必须有更好的方法。我怎样才能让它更智能？

是的，有一个更好的解决方案。以下是 Angular 指令的用法：

myApp.directive("toggleClass", function() {
    return {
        link: function($scope, element, attr) {
            element.on("click", function() {
                element.toggleClass("option-selected");
            });
        }
    }
});

然后，将其应用于您的li：

<ul>
    <li toggle-class>Something 1</li>
    <li toggle-class>Something 2</li>
</ul>

而且，您的 CSS：

li.option-selected {
    background: red;
}


var myApp = angular.module("sa", []);
myApp.directive("toggleClass", function() {
  return {
    link: function($scope, element, attr) {
      element.on("click", function() {
        element.toggleClass("option-selected");
      });
    }
  }
});
li.option-selected {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="sa">
  <li toggle-class>Something 1</li>
  <li toggle-class>Something 2</li>
  <li toggle-class>Something 3</li>
  <li toggle-class>Something 4</li>
</ul>

您是否要使用（或保存）用户单击li项目的结果？如果这样做，则可能需要为每个li元素保存一个布尔值。

//JS
$scope.listA = [
    { label: "Something 1", checked: false },
    { label: "Something 2", checked: false },
    { label: "Something 3", checked: false }
];

然后使用ng-repeat和ng-click来处理它。

<!-- HTML -->
<ul>
    <li ng-repeat="item in listA" ng-class="{ 'selected': item.checked }">
        <a href="javascript://" 
            ng-click="item.checked = !item.checked">{{item.label}}</a>
    </li>
</ul>
相关文章：