<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>
‘active’类的CSS来自bootstrap.
所以切换工作,这几乎是我想要的;我希望它类似于导航链接中的活动状态,除了在我的示例中它处理图像所以需要担心url字符串等.
我试着模仿这个在这里找到的例子无济于事(我为图像尝试了相同的逻辑)：ng-class to highlight active menu item based on ng-repeat. AngularJS
如果有人能指出我正确的方向,我将非常感激. ：d
我会在你的情况下做的是在ng-repeat的父范围内定义一个对象,并将索引或任何你想要的东西分配给该对象的属性.这是因为对象在javascript中通过引用工作,这意味着ng-click实际上将更新父范围属性而不是重新定义它.
plnkr上的示例： http://plnkr.co/edit/oA12yLIb3RnlSYe6JxhI?p=preview
原文链接：https://www.f2er.com/angularjs/143482.htmlplnkr上的示例： 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>
干杯
