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

【问题标题】：How do you toggle an active state ng-class in an ng-repeat item using ng-click?如何使用 ng-click 在 ng-repeat 项目中切换活动状态 ng-class？
【发布时间】：2017-03-30 20:06:33
【问题描述】：

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

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

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

我尝试模拟此处找到的这个示例，但无济于事（我尝试了相同的图像逻辑）：ng-class to highlight active menu item based on ng-repeat. AngularJS

如果有人能指出我正确的方向，我将不胜感激。 :D

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-ng-click ng-class

【解决方案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>

干杯

【讨论】：

是的，我说代码运行良好。不受欢迎的是多选。应该是当单击一个图像时，会取消选择另一个图像。就像处理活动菜单项的主题一样：stackoverflow.com/questions/19943217/…
谢谢！我做错了 $index 因为我没有引用那个对象。太感谢了！！ :) :)

【解决方案2】：

您可以通过以下方式尝试：

<body>
<style>
.blue{
    background:blue;
}
</style>
<div ng-app='my'>
  <div ng-controller='maincontroller as mainctrl'> 
    <div ng-repeat='item in mainctrl.arr'>
    <p ng-class='{"blue":mainctrl.bgcolor==item}'
    ng-click='mainctrl.addColor(item)'>
    item {{item}}
    </p>

    </div>
  </div>
</div>
<script>
var app = angular.module('my',[])
app.controller('maincontroller',maincontroller)
function maincontroller(){
var mainctrl = this;
mainctrl.arr = [1,2,3,4,5,6];

mainctrl.addColor = function(data){
mainctrl.bgcolor = data
}
}
</script>
</body>

【讨论】：