如何向使用ng-repeat重复的元素添加特定的类？
在使用ng-repeat重复元素时，可以通过ng-class指令向元素添加特定的类。ng-class指令可以根据条件动态地添加或移除类。
具体操作如下：
- 在ng-repeat所在的元素上添加ng-class指令，例如：ng-class="{ 'class-name': condition }"。
- 'class-name'是要添加的类名。
- condition是一个表达式，当表达式的值为true时，'class-name'类将被添加到元素上；当表达式的值为false时，'class-name'类将被移除。
示例代码如下：
<div ng-repeat="item in items" ng-class="{ 'highlight': item.selected }">
{{ item.name }}
</div>在上述示例中，ng-repeat会根据items数组的长度重复生成div元素。当item.selected为true时，highlight类将被添加到对应的div元素上，从而实现特定元素的样式变化。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
腾讯云云服务器（CVM）是一种可随时扩展的云计算服务，提供高性能、可靠稳定的云服务器，适用于各类应用场景。您可以根据业务需求选择不同配置的云服务器，并通过腾讯云控制台或API进行管理和操作。
注意：本答案仅提供了一种解决方案，实际应用中可能还有其他方法来实现相同的效果。
相关·内容
2回答
我想使用ng-repeat创建一个高分列表。
玩家列表看起来如下：
[
{name: 'anton', score: 32},
{name: 'rolf', score: 3},
{name: 'max', score: 12},
{name: 'mike', score: 49},
{name: 'john', score: 25},
{name: 'rui', score: 5},
{name: 'wolle', score: 6},
{name:
浏览 3提问于2015-11-01得票数 0
2回答
我在我的角度应用程序中使用。波纹效应在整个应用程序中运行得很好，不过当使用ng-repeat时，我就失去了涟漪效应。
我在同一个ng-repeat中在<ul>之外创建了一个条目，并且运行良好。
是因为ng重复创建了一个新的作用域吗？如果是这样，我应该如何正确地处理它.？
我的代码中有遗漏什么吗？
<ul class="list-unstyled">
<li class="btn" ng-repeat="data in eventsData">
{{data.title}}
</li>
浏览 0提问于2015-12-17得票数 1
回答已采纳
这是我的ng-repeat：
<div class="{{event.who_seen_it | newEvent}}" ng-repeat="event in eventList" ng-click="openEvet(event.title,$index)">
<h3 class="event-title">{{event.title}}</h3>
</div>
我使用{{event.who_seen_it | newEvent}}向每个重复的元素添加类。我想要改变这个过
浏览 0提问于2016-12-16得票数 0
angular.module("myApp",[])
.controller("myCtrl",function($scope) {
$scope.persons = [{name:"teja",age:11},
{name:"Ash",age:12},
{name:"teja",age:11}];
});
角不允许
浏览 4提问于2017-03-08得票数 0
回答已采纳
1回答
当我使用ng动画和css3转换时，我在重新初始化集合时的ng-repeat中有一个巨大的延迟(元素正在延迟地从DOM中消失)。
我让ng-在每次迭代中重复create card指令：
ng-repeat="card in cards track by $index" card
card指令的根节点上有一些转换：
.card {
transition: transform 0.2s linear;
transform: translateX(0);
}
重新初始化卡收集$scope.cards = []时出现问题
你知道如何解决这个问题吗？
浏览 1提问于2015-06-09得票数 1
我有一份电子邮件地址和地址的输入表格。
用户可以添加多达3封电子邮件和地址线动态地点击+符号在输入字段的右边。
当i ng-repeat输入字段时，对于每个输入字段也会重复+。如何仅对$index值最大的最后一个输入字段显示该+。
浏览 4提问于2015-06-24得票数 5
回答已采纳
我创建了一个指令，在用户向下滚动时处理博客文章的无限加载。
我想知道当使用ng-重复呈现提要时，AngularJS如何处理添加的新博客文章。
例如
<article ng-repeat="post in posts">
// stuff...
</article>
每次posts用新的帖子更新时，是否重新创建了所有文章？假设只向数组追加新的帖子。
纳克-重复足够聪明，只创建新的帖子吗？
我担心在用户滚动了很长一段时间之后，刷新速度会变慢，因为每当从服务器获取新的博客时，ng重复都会重新创建所有的博客。
浏览 1提问于2014-04-14得票数 1
回答已采纳
我有一个表行，我想重复一遍，每一行只有4个td
<table>
<tr>
<td ng-repeat="team in Teams">{{team}}</td>
</tr>
</table>
如何重复Td，但在每4个td上创建另一个tr并关闭前一个tr。
浏览 3提问于2015-10-09得票数 3
回答已采纳
这与我的问题有关-
我这里的问题是，我需要嵌套的ng-repeats，而嵌套的ng-repeats会消耗更多的内存，因为需要注册更多的监视器。
<table>
<thead><td>Id</td><td>Name</td><td>Ratings</td></thead>
<tbody>
<tr ng-repeat="user in users | orderBy:'name' | limitTo:display_limit"
浏览 0提问于2013-06-29得票数 3
3回答
我很难理解是如何在angularjs中通过ng重复的表达式跟踪的。文档非常稀少：
您能解释一下这两段代码在、数据绑定、和其他相关方面之间的区别吗？
与：track by $index
<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
<input ng-model="value[key]">
</div>
没有(相同的输出)
<!--names
浏览 0提问于2014-03-31得票数 112
回答已采纳
我们可以在ng- $index中通过重复来跟踪项目，并像这样显示它们的索引
<div ng-repeat="n in [42, 42, 43, 43] track by $index">
[{{$index}}] -- {{n}}
</div>
Angular允许我们在官方网站上使用一个自定义函数来跟踪ng-repeat中的对象
<div ng-repeat="n in [42, 42, 43, 43] track by myTrackingFunction(n)">
{{n}}
</div>
但是有没有办
浏览 10提问于2016-07-18得票数 0
如何使DOM div重新出现并应用新的参数，比如不同的颜色，不同数量的子元素；在ng-show =false对页面隐藏它之后？ng-show = true是其中的一部分，但我如何在它重新出现之前或在它重新出现时修改它？基本上，该div包含
<div> ng-show="showdiv" ; ng-repeat="x in elements" </div>
我正在尝试用元素中的一组不同的元素重新出现
浏览 0提问于2017-08-10得票数 0
我有一个表，如plunkr示例所示。
在这种情况下，$scope.siteData中的“east”或“west”在控制器中不存在数据，但对于“north”、“south”和“central”则不存在数据。
“中央”的数据显示在“东方”下面。
当ng-重复没有任何数据时，如何在“east”和“west”下显示空列。
这是我的html
<div class="panel-body">
<div class="table-responsive">
<table cl
浏览 0提问于2016-11-30得票数 1
回答已采纳
在我的页面中，我使用了四个级别的嵌套重复器。每个级别都有CheckBoxList，如图像所示。
这种情况是，当我选中/选择顶级复选框项时，应该选中/选择子级CheckBoxList项，假设如果选择国家级别(加拿大) CheckBoxList项(创建)，则应选中国家“创建”复选框项的所有州和城市。如下图所示。州及其城市也是如此。如果只选择了一个州的列表项，则应该检查其所有城市的相同列表项。
请帮助我在客户端获得这个场景。
浏览 3提问于2014-01-31得票数 0
回答已采纳
2回答
我们的团队在ServiceNow中创建了一个小部件，该小部件显示一行图标，并在单击图标时在div中显示/隐藏其他详细信息。这就是我们的html和客户端控制器的样子：
<div class="icons">
<ul class="flex justify-content-center align-items-center">
<li ng-repeat="item in c.data.linksArray track by $index">
<a class="link
浏览 7提问于2020-02-21得票数 1
回答已采纳
我希望扩展项指令在DOM中呈现ng-重复之后运行。
在下面的示例中，^仅添加到静态ul元素中，因为动态ul元素尚未由ng-重复生成。见 中的代码
如何控制执行流，以便ng-重复在父指令之前完成？
<ul id="nav" ng-controller="AppController as vm" extend-item>
<li ng-repeat="group in vm.groups">
<a href="/{{group.id}}"><span>{{group.name
浏览 3提问于2015-04-27得票数 0
我是JQuery的新手..。
每次点击一个按钮我都会切换一个DIV .以前，每次添加另一个DIV (产品)时，我都会创建一组新的jquery代码。这个网站将使用一个内容管理系统，所以我需要把这个重复的代码转换成一个函数.
当单击ID时，重复以切换DIV的代码。
// Product Detail Toggle Buttons
$("#xc25_button").click(function(e){
$("#xc25_detail").find(".product_details").sli
浏览 0提问于2014-05-03得票数 0
回答已采纳
1回答
我一直在搜索谷歌和斯塔克溢流，但没有找到我正在寻找的。
这是我所拥有的。我保证我会为解决这个问题付出真诚的努力。
问题如下:我有动画处理列表。当我使用超时值将项目添加到列表中时，它们将正确地显示出来。但是，"title“变量是一个字符串。当此值发生变化时，我想应用动画。老实说，我现在仍然不知道该如何让它发挥作用。我知道我可以为ng-隐藏的动画添加css类，但我仍然不太明白如何在这里适合它。任何帮助，我们都会提前表示感谢。请指点我。你不用给我密码。即使是对如何实现这一目标的高级别描述也足够了。
// app.js
(function() {
var app = angular.mod
浏览 2提问于2015-04-03得票数 0
回答已采纳
1回答
使用Symfony2.x，我有一个细枝循环来遍历一些数据，我也有一个ng-repeat来处理类似的元素(不同的是这些元素是在后台加载的)，但这两者都是为了共享相同的功能。
我在twig循环版本中有一些奇怪的功能，它们在ng-repeat版本中工作得很好。我有种感觉，这只是一个范围问题。
我在文档中读到，ng-repeat将自动为重复的元素创建一个新的作用域，但当然这不会发生在树枝循环中。
如何手动调用每个重复元素的新作用域？
浏览 2提问于2013-05-24得票数 1
回答已采纳
嘿，谢谢你检查我的问题，我正在尝试在ng-grid中创建一个带有ng重复的标题，但是是水平的。我可以执行ng-repeat操作，但这些项目是垂直重复的。有没有可能让它们水平呢？
这是我的模板：
headerCellTemplate: '<div ng-repeat="day in dayInfo" ng-class="col.colIndex()" >{{day.dayId}}</div>'
浏览 1提问于2014-08-01得票数 0
在角1.x中，以下代码的工作原理是我想要单击和翻转ng-重复中的卡片
<div class="card" ng-repeat="let card of cards">
<div class="flipcard" ng-class="{'flipped':isflipped}" ng-click="isflipped = !isflipped">
</div>
</div>
然而，在角2当点击，它翻转每一个“卡”在ngFor循环.如何仅将ngClass条
浏览 0提问于2016-07-25得票数 5
回答已采纳
我使用angularjs指令的ng-repeat来加载存储了JSON值的数组。值也有子数组。
<div ng-repeat="data in MENULIST" > //MENULIST have array(Data)
在检查一些条件之后，比如(if:condition)。
<div ng-if="(data.SubMenu.length >0)" ng-init = "MENULIST = data.SubMenu"></div>
但该赋值或初始化并不是对MENULIST全局执行的，它仅限于此di
浏览 2提问于2018-10-05得票数 0
4回答
所以我在我的页面上有这样的安排：
<div class="food">
<div>
<a href="#" class></a>
<a href="#" class></a>
</div>
<div>
<a href="#" class></a>
<a href="#" class></a
浏览 0提问于2013-09-28得票数 5
我正在重复使用ng-重复在这里我需要找到最后的li活动，如果最后一个li是活动的，我需要禁用prev按钮。
<div class="pagination">
<button ng-disabled="start == 0" ng-click="prevPage()">Prev</button>
<ul>
<li ng-repeat="i in getNumber(myNumber) | limitTo: pagerStep track by $index&
浏览 2提问于2016-07-14得票数 1
回答已采纳
4回答
如何只显示第一个元素的角度？
我像这样使用ng-repeat：
<div ng-repeat="product in products" ng-show="$first">
<div>{{ product.price }}</div>
</div>
但是既然我没有重复，那么我就不用使用ng-repeat了？我如何才能让这个只显示在第一个，而不必在ng-重复？
浏览 9提问于2013-12-03得票数 12
回答已采纳
我正在使用wp_list_pages()在wordpress中创建页面链接。每个链接都包含一个显示视网膜图标的<i>标签。我想为每个链接设置一个不同的类，以显示不同的视网膜图标。到目前为止我的代码是：
<?php wp_list_pages('link_before=<i class="A RETINA ICON CLASS NAME"></i>&link_after=<br >'); ?>
我如何使用页面、元数据或其他方式做到这一点？
浏览 0提问于2013-10-31得票数 0
以下是我在repeat中使用的JSON数据：
{
"2": {
"id": 3,
"0": {
"avatar": "http:\\/\\/localhost\\/pottero\\/wp-content\\/plugins\\/dokan-live-chat\\/assets\\/images\\/avatar.png",
"message": "Hello",
"id": "2",
浏览 0提问于2019-04-07得票数 1
如何从ng单击函数中指向其他ng-重复元素？我想修改其他ng-重复元素的{nameClass}，从单击它们的某个人。
Html：
<li class="{{nameclass}}" ng-repeat="person in people" ng-click="somefunction()"></li>
javascript：
function somefunction(){
this.nameclass = "some";
//what to set the other classes?
浏览 2提问于2014-03-23得票数 0
回答已采纳
我希望使用ng-重复构建一个嵌套表单，如下所示。因为我的输入字段是必需的，所以我想在下一行中添加一个错误消息，比如：<span ng-show="submitted && editableForm.[e.name].$error.required" class="error">Required field</span>，我知道这是错误的"editableForm.e.name.$error.required"，那么正确的方法是什么呢？
UPDATE刚刚尝试添加<ng-form name="ro
浏览 1提问于2013-07-25得票数 6
回答已采纳
2回答
我有一个简单的角度模板，做一个简单的ng重复，包含一些div。如果$routeParams.userId等于循环中对象的id，我现在想给包含div的类提供一个类。请参阅下面代码的第二行，以了解我的意思。
<div class="row" ng-repeat="contact in contacts">
<div class="col-xs-12 contact-wrapper {{ if ($routeParams.userId == contact.id){ print 'active' } }}"&g
浏览 3提问于2014-12-16得票数 1
回答已采纳
我使用ng-repeat将带有图像、一些文本和索引(0到3)的JSON对象数组加载到滑块中。我有一些函数可以根据所单击的与每个JSON对象对应的导航按钮来更改图像和文本显示。我已经能够让正确的图像和文本显示在滑块中，然而，CSS动画不工作。有人知道我的代码出了什么问题吗？谢谢。
<div class="slide-window" >
<div ng-repeat="x in content" class="slide" ng-show="showSlide =
浏览 2提问于2015-02-05得票数 0
1回答
如何将过滤后的ng-重复保存在新变量中？
<div ng-repeat="Item in AllItems | filter: { Type: 'test' } | filter: searchByItem as results">
我想要这样做，因为我需要对分页的过滤数组的长度。
浏览 2提问于2016-02-09得票数 1
回答已采纳
4回答
我有个像吼叫一样的角-重复，
<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata">
<-- my content -->
</div>
</div>
这将创建如下的输出，
<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata
浏览 4提问于2015-06-29得票数 7
回答已采纳
5回答
我有一个代码，它进行ajax调用，并获得一个json对象，其中呈现ng-重复。一旦所有这些都呈现出来，我想调用一个函数，它绑定了呈现元素上的一些事件。
<div ng-repeat="list in arr | filter: {DegreeName: 'xyz'}">
<div class="saveprogram">save program</div>
</div>
<div ng-repeat="list in arr | filter: {DegreeName:
浏览 8提问于2016-07-09得票数 3
回答已采纳
app.js：
var app = angular.module('myApp',
[]);
app.controller('ExampleController', ['$scope', 'myService', function($scope, myService) {
$scope.titles=myService.list;
$scope.controllerFunction = function() {
myService.list.push("bla");
};
}]);
app.
浏览 1提问于2015-08-06得票数 0
回答已采纳
我的自定义指令在ng-重复中有问题。我试图绑定的其中一个值最终总是未定义：
ItemList模板
<div>
<table>
<thead>
<tr>
<th ng-repeat="column in itemContext.columns">{{column.heading}}</th>
</tr>
</thead>
<tbody>
<!-- Also experimented lea
浏览 3提问于2015-11-19得票数 0
回答已采纳
我只是张贴必要的代码和解决这一问题，将消除其余的我的疑虑。我是刚接触过天使的，所以请原谅我在问一些愚蠢的事情。
我使用ng-重复来生成一个列表，该列表使用控制器作用域中定义的数组。当我单击“添加另一个”按钮时，将创建一个新元素。我想要访问这个元素来向它添加一个类。但是当我在同一个函数'getElementById‘中使用'addNewForm’函数时，我会得到'null‘。然而，当我通过点击“查找无题”按钮来调用函数'fn‘时，我得到了正确的元素。有人能解释并解决这个问题吗？任何帮助都是非常感谢的。提前感谢！
我在下面张贴代码：
HTML：
<div ng
浏览 1提问于2018-09-18得票数 0
回答已采纳
1回答
我需要验证一个HTML元素(一个文本字段)，它的id是通过一个数组动态分配的。我在下面给出了我的HTML代码。请告诉我如何在jQuery中设置超文本标记语言id？
<div class="form-group" ng-repeat="property in entity.entityPropertyTypes">
<!-- PROPERTY -->
<div class="col-md-3">
<label class="control-label">
浏览 0提问于2015-11-19得票数 0
.div(ng-repeat='item in items')
button(id='ID{{$index}}') No Hi
button(id='anotherID1') Hi
内相关角指令
$('#ID1').on('click', function() {alert('hi');}); // does not work
$('#anotherID1').on('click', function() {alert('hi');})
浏览 6提问于2013-09-24得票数 5
回答已采纳
1回答
我想捕捉按钮的点击事件。按钮的id是在ng-重复内部动态生成的。
.set(ng-repeat='button in ['4', '3' , '2', '1' ]')
button(id='{{$index}}') button {{button}}
按钮4
按钮3
按钮2
按钮1
在上面，我应该把my-dir指令属性/类放在哪里？
.my-dir
.set ...
以上内容不起作用。
和
.my-dir.set ...
多次执行链接函数。
如果上面的语句不够清晰，请在下面的代码中详细说明
浏览 3提问于2013-09-26得票数 2
回答已采纳
1回答
我正在创建一个元素网格，并对每个元素使用CSS转换，使其具有悬停效果。我也想在相邻的x轴元素和y轴元素上添加次要效应，从而产生云效应。我想我将使用jQuery的next()和prev()方法，或者通过$index和$parent.$index引用这些元素。
网格区域将足够大，以防止行包装(使用负边距和隐藏溢出)。
下面是一个简单的重复示例：
<div class="activity-thumb-row" ng-repeat="i in getNumArray(20) track by $index">
<div class="a
浏览 8提问于2015-01-22得票数 1
回答已采纳
我正在使用angularjs框架执行我的第一步，我不明白如何更新第二个ng--在第一个条目ng中重复数据--只在用户单击它时重复(延迟加载)。
<table class="table table-striped table-hover">
<tbody ng-repeat="customer in customers">
<tr>
<td>
<button ng-click="loadInvoices(customer);
浏览 1提问于2014-03-09得票数 1
回答已采纳
1回答
我有一个带有多个数据-*属性的锚标记，这个锚将使用ng-重复多次重复。当单击单个元素时，我想获取属性的值。
我使用JQuery获取属性值，使用$(this).attr(' attribute ')很容易。
但是，这只适用于页面上的一个按钮。当使用ng-重复呈现多个按钮时，此操作不起作用。我假设这是因为多个按钮以相同的属性名称呈现，而jquery不知道如何区分它们。如何获得单击的元素的数据-*属性值？
//JQuery
//Works when only a single editButton is on the page but not when multiple button
浏览 0提问于2017-12-04得票数 0
回答已采纳
3回答
不使用ng重复的jQuery函数
、、、、
我使用ng-repeat来重复一些显示记录列表的div。
问题:我想做的是，当用户被点击记录弹出应该打开。ng-repeat运行得很好，但问题是jQuery单击事件并不适用于ng-repeat中的元素。
HTML代码:
<div data-ng-controller="AlbumCtrl">
<div data-ng-repeat="z in songInfo">
<div data-ng-repeat="b in z.tracks">
<div class="border
浏览 1提问于2015-06-06得票数 3
回答已采纳
我基本想做的事情如下：
我有两列，我想用一个ng-repeat来填充数据，但不想重复列本身。我认为这可能是不可能的，但我必须尝试:)
->Start ng-repeat="item in items"
<div exclude-from-repeat class="col1"> -> append {{item.Name}} here </div>
<div exclude-from-repeat class="col2"> -> append {{item.Description}} her
浏览 0提问于2015-01-24得票数 2
1回答
我得到了一个包含文字和图像的200多个物品的大清单。ng-repeat是一种缓慢的方式来平滑地呈现这一点。它用这个试了一下。效果不错。但不是收集-重复。
我的网络服务还这个：
有些事件有特定的日期。事件应按日期分组。因此，为了使用集合重复，如果不能使用angular.filter groupBy，如何才能插入分隔符？
浏览 3提问于2015-10-08得票数 3
回答已采纳
5回答
我如何判断是否有一个项目显示的ng-重复？比如，if ng-repeat items === 1: do something.
<div ng-controller="mycontroller2">
<form ng-submit="submit()">
{% csrf_token %}
Search by name:
<input ng-model="artistname" />
<input type="submit" value="submit"
浏览 0提问于2014-12-06得票数 0
回答已采纳
我有一个指令如下，
angular.module("sample").directive("sampleDir", [
"$compile", function($compile) {
return {
restrict: "E",
replace: true,
scope: {
options: '=',
source: '='
},
templateUrl
浏览 3提问于2015-03-30得票数 1
回答已采纳
我使用的是角材料1.0.1库，但我不希望在使用ng-repeat时延迟删除DOM元素。当数据集发生变化时，元素会停留更长的时间，并且页面看起来会滞后一些。
我发现禁用使用$animate.enabled(false)的所有动画可以解决这个问题，但我仍然想要一些动画，比如显示$mdToast。
如何仅对ng-repeat数据集中的更改禁用动画
浏览 4提问于2016-01-04得票数 1
回答已采纳
1回答
我有两个嵌套的ng-重复，我想多次添加相同的表单MiseEnContext，在这个"MiseEncontext“中我想添加一些输入，但是当我添加文本时，它是为我的MiseEnContext问题添加的:如何隔离我的MiseEncontext？
'<h4>Exercice Redactionnel</h4>\
<ul>\
<li><a ng-click="addMiseEnContext()">Mise en conte
浏览 5提问于2015-06-20得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
