从ng-repeat中单击时，向元素添加类
在AngularJS中，ng-repeat是一个非常常用的指令，用于遍历数组并在DOM中生成重复的元素。如果你想在点击某个元素时向它添加一个类，可以使用ng-class指令结合表达式来实现动态类的绑定。
基础概念
- ng-repeat: AngularJS中的一个指令，用于遍历数组并在DOM中重复生成元素。
- ng-class: AngularJS中的一个指令，用于动态地将一个或多个类名添加到元素上。
相关优势
- 动态性: 可以根据数据模型的变化动态地添加或移除类。
- 简洁性: 减少了手动操作DOM的需要，使代码更加简洁和易于维护。
类型
- 表达式: 可以使用一个表达式来决定是否应用某个类。
- 对象: 可以使用一个对象字面量，键是类名，值是布尔表达式，当表达式为真时应用该类。
- 数组: 可以使用数组来组合多个类名或表达式。
应用场景
- 交互效果: 如点击按钮改变背景色。
- 状态指示: 如显示当前选中的项目。
- 条件渲染: 根据不同的条件显示不同的样式。
示例代码
假设我们有一个数组items，我们想要在点击某个项目时给它添加一个名为active的类。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
.active {
background-color: yellow;
}
</style>
</head>
<body ng-controller="myController">
<ul>
<li ng-repeat="item in items" ng-class="{'active': item.isActive}" ng-click="toggleActive($index)">
{{ item.name }}
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.items = [
{ name: 'Item 1', isActive: false },
{ name: 'Item 2', isActive: false },
{ name: 'Item 3', isActive: false }
];
$scope.toggleActive = function(index) {
$scope.items[index].isActive = !$scope.items[index].isActive;
};
});
</script>
</body>
</html>解释
- HTML部分:
- 使用
ng-repeat遍历items数组。 - 使用
ng-class指令，当item.isActive为真时添加active类。 - 使用
ng-click指令绑定点击事件，调用toggleActive函数并传递当前项的索引。
- 使用
- JavaScript部分:
- 定义了一个AngularJS模块
myApp和一个控制器myController。 - 在控制器中初始化了一个包含三个对象的数组
items，每个对象都有一个name属性和一个isActive属性。 toggleActive函数用于切换指定索引项的isActive状态。
- 定义了一个AngularJS模块
遇到的问题及解决方法
如果在实现过程中遇到类没有正确添加的问题，可以检查以下几点：
- 确保
ng-app和ng-controller指令正确设置。 - 确保
ng-class的表达式正确无误。 - 确保
ng-click绑定的函数正确执行，并且能够正确修改数据模型。 - 使用浏览器的开发者工具检查元素，确认类是否被正确添加或移除。
通过这种方式，你可以实现点击列表项时动态添加类的效果，从而增强用户界面的交互性。
相关·内容
我只想给被点击的元素添加一个工具提示。单击时，工具提示将添加到所有重复元素中。请帮帮我。<div ng-repeat="item in listOfMenu" class="repeat_container">
<div ng-repeat="menu in item" classclass="shadow img_cont"
浏览 3提问于2016-08-23得票数 0
2回答
在单击父元素时，是否有更有效的角度更改或向父元素的子元素添加类，然后在函数中获取所有的childNodes并为每个子元素添加一个类？<div class="menu-icon-container" ng-click="changeState()">
<div ng-repeat="bar
浏览 8提问于2017-10-05得票数 0
回答已采纳
2回答
因此，我试图从列表项中添加/删除一个类，这取决于变量：(注意，如果有更好的方法，请让我知道:P )<li ng-repeat="fold in folds" class="{{: ''}}"> {{fold.name}}
</a>
浏览 2提问于2015-10-21得票数 3
回答已采纳
这是我的ng-repeat： <h3 class="event-title">{{event.title}}</h3>我使用{{event.who_seen_it | newEvent}}向每个
浏览 0提问于2016-12-16得票数 0
1回答
当使用AngularJS单击元素时，我想切换一个类。我需要单击的元素来接收类，并且需要列表中的任何其他项来松散类。为此，我研究了许多假设的解决方案，但是在实现这些解决方案时，它们不能正常工作，我也不明白为什么它们会这样做。
提出的一般解决方案是将变量设置为ng-repeat列表中项的索引。然后使用ng-class添加类。JSFiddle .=&q
浏览 2提问于2015-01-07得票数 2
回答已采纳
1回答
五级多类条件
、、
我有深度级别3的类别列表，所以每个级别都有类，但是当我选择具有"cat“风格的第3级类别时，我需要在li元素中添加" active ”类，但不知道如何向ng类modlue添加多个条件，我尝试了其他方法，但是如果没有运气，我只需要将活动类添加到单击链接的li元素中？<li ng-repeat="
浏览 2提问于2015-01-28得票数 0
回答已采纳
到目前为止，当我单击一个元素时，它会向子div添加一个突出显示类，并切换子表单元素的可见性。如何使单击对ng-重复中的每个其他元素做相反的操作？ <div ng-if="show" class="s
浏览 2提问于2014-12-29得票数 0
回答已采纳
1回答
我想深入链接到由目标页面上的ng-repeat生成的HTML片段id。例如，链接可能如下所示：有没有一个优雅的解决方案来克服这个问题？
浏览 2提问于2013-10-22得票数 0
我有很多团队：再重复一遍，循环这些：但我还想向这些元素添加ng单击，如下所示：
<span ng-repeat="team in teams"
浏览 4提问于2015-05-26得票数 0
回答已采纳
1回答
我正在尝试向ng-repeat中选定的div添加一些类。如果我这样做：<div ng-class="{'selecte':isSelected,'normal':'!isSelected'}" ng-repeat="oneayah in ayahs" ng-click="selectParticular(oneayah)">
{{oneayah.text}}&l
浏览 2提问于2015-06-05得票数 0
2回答
我是新的角度，并希望简单地移动一个元素，当它被点击到另一个div。怎么做才是最好的方法？<div ng-app> <ul> {{ elem.elem_name> <h1>Second Area</h1>
<ul&
浏览 3提问于2014-04-15得票数 1
回答已采纳
我在ng-repeat循环中有一些元素，这些元素具有以下属性： <div>
<input ng-class，它将类clicked添加到单击元素中，并从所有其他按钮输入中删除clicked类。问题是，如果我单击页面其余部分上的任何其他<e
浏览 4提问于2016-07-25得票数 1
回答已采纳
我为一篇文章做了一个文本编辑器summernote，之后我在html元素中使用modalbootstrap和angularJS ng-repeat来读取它，以便从json api my php中获取数据但文章内容的问题是有一个图像，我想添加'img-fluid‘类，以便图像具有响应性。 我曾尝试使用jquery addClass方法向element html添加类，代码如下所示。点假设示例： 我的script.js $(&#
浏览 34提问于2020-07-09得票数 0
回答已采纳
我有一个用以下代码创建的矩阵： <div ng-repeat="cols in cell$index }} {{ $index }} </div>
在指令中，我有一个函数，当单击该函数时，应该更改对象的值并向单击的元素<
浏览 4提问于2017-07-11得票数 0
当我单击“添加另一个”按钮时，将创建一个新元素。我想要访问这个元素来向它添加一个类。但是当我在同一个函数'getElementById‘中使用'addNewForm’函数时，我会得到'null‘。然而，当我通过点击“查找无题”按钮来调用函数'fn‘时，我得到了正确的元素。有人能解释并解决这个问题吗？任何帮助都是非常感谢的。提前感谢！我在下面张贴代码：<div
浏览 1提问于2018-09-18得票数 0
回答已采纳
对于select按钮中的选项，我有一个ng-repeat。每次加载时，它都需要一段时间来填充select的选项，所以当我足够快地单击select时，列表中没有任何内容。我尝试向select元素添加一个ng-cloak，但是没有结果。有什么建议吗？
浏览 2提问于2013-08-08得票数 0
下面是对这个bug的描述：
每当用户点击汉堡包导航图标时，侧导航就会动画化，打开导航链接列表以单击。单击此图标后，jQuery将向页面上的html元素添加一个类。每当用户单击其中一个导航链接时，Turbolinks就会执行Turbolinks的操作:向服务器发出XHR请求，以获取页面所需的HTML，并将页面的body标记替换为响应中的body标记。然而，当Turbolinks从服务
浏览 1提问于2018-09-14得票数 1
回答已采纳
当用户单击div.togglethis时，我需要发生两件事：
当用户第二次单击div.togglethis时，它会从两个元素中删除这两个类。
浏览 6提问于2011-07-30得票数 1
回答已采纳
我使用ng-repeat来迭代数组，它工作得很好。我的要求是如何将类(active)添加到的ul的第一个子级，每当用户单击时，单击的元素应该得到active类，从li元素的其余部分中删除 active 类<code>E 210</code>。我在JQuery中很容易做到这一点，比如：
$('li').addCl
浏览 2提问于2015-07-08得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
