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

Question

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

mat*_*nji 8 angularjs angularjs-ng-repeat angularjs-ng-click ng-class

<ul>
  <li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false">
      <img data-ng-class="{'active' : toggle}" src="" />
  </li>
</ul>

Run Code Online (Sandbox Code Playgroud)

'active'类的CSS来自bootstrap.

所以切换工作,这几乎是我想要的; 我希望它类似于导航链接中的活动状态,除了在我的示例中它处理图像所以需要担心url字符串等.

我试着模仿这个在这里找到的例子无效(我为图像尝试了相同的逻辑):ng-class突出显示基于ng-repeat的活动菜单项.AngularJS

如果有人能指出我正确的方向,我将非常感激.:d

Answer 1

Heb*_*rLZ 13

我会在你的情况下做的是在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>

Run Code Online (Sandbox Code Playgroud)

干杯

归档时间：	12 年前
查看次数：	51052 次
最近记录：	9 年，5 月前