gpt4 book ai didi

angularjs - 如何使用 ng-click 在 ng-repeat 项目中切换事件状态 ng-class?

转载 作者:行者123 更新时间:2023-12-04 06:02:23 24 4
gpt4 key购买 nike

<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

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

干杯

关于angularjs - 如何使用 ng-click 在 ng-repeat 项目中切换事件状态 ng-class?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25559549/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com