Question

我有2＆＃34;列表＆＃34; （用HTML格式）。我想这样做，以便我点击任何选项，添加一个将background-color元素的li更改为红色的类。如果再次单击任何单个选项，则会删除该类（因此背景将恢复为白色）：

这是我当前的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>

必须有更好的方法。我怎样才能让这更聪明？

Answer 1

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

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

然后，将其应用到li s：

<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>

Answer 2

您打算使用（或保存）用户点击的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>

如何在ng-click中为多个元素添加AngularJS中的类（聪明地）？

2 个答案: