如何使用ng-click在ng-repeat项中切换活动状态ng-class？

一尘不染

如何使用ng-click在ng-repeat项中切换活动状态ng-class？

angularjs

“活动”类的CSS来自引导程序。

因此，切换作品几乎是我想要的。我希望它类似于导航链接中的活动状态，但在我的示例中，它处理图像，因此需要担心url字符串等。

我尝试模拟此示例，但没有用（我尝试了相同的图像逻辑）：ng-class突出显示基于ng-
repeat的活动菜单项,如果有人能指出我正确的方向，我将不胜感激。：D

阅读 274

2020-07-04

共1个答案

一尘不染

在您遇到的情况下，我要做的是在ng-repeat的父范围内定义一个对象，然后将索引或任何您希望分配给该对象的属性。那是因为对象通过javascript中的引用来工作，这意味着ng-click实际上将更新父范围属性，而不是重新定义它。在plnkr上的示例：http://plnkr.co/edit/oA12yLIb3RnlSYe6JxhI?p=preview

<!DOCTYPE html>
<html ng-app>

  <head>
    <style>
        .active{
            background-color: red;
            height: 500px;
            width: 500px;
        }
    </style>
  </head>

  <body ng-controller="HolaCtrl">
    <ul>
      <li data-ng-repeat="image in images" data-ng-click="toggleObject.item = $index">a
         <img data-ng-class="{'active' : toggleObject.item == $index}" src="" /><br>
      </li>
    </ul>
    <script>
        function HolaCtrl($scope){
            $scope.images = [1,2,3];
            $scope.toggleObject = {item: -1};
        }
    </script>
  </body>

</html>

2020-07-04