ng-repeat动态改变样式

最新推荐文章于 2018-08-27 17:29:40 发布

柳絮飞祭奠

最新推荐文章于 2018-08-27 17:29:40 发布

阅读量335

点赞数

分类专栏： AngularJS 文章标签： AngularJs

AngularJS 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何在AngularJS应用中利用$index来根据不同数组下标改变元素样式的方法。通过具体示例代码展示了如何在ng-repeat指令中使用$index获取当前项的下标，并据此设置不同的CSS类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=red][size=x-large]当我们使用AngularJs的ng-repeat时候动态绑定数据时，遇到遍历出来的标签样式都一样，这时候希望根据数组的下标分别对应不同的样式[/size][/color]
解决：使用$index获取数组下标根据下标改变样式

<div ng-repeat="item in menulist">
		<div class="z_cstorge_menu">
			<span class="z_cstorge_menu_ico{{$index}}"></span> <span
				class="z_cstorge_text"> {{item.DirName}} </span>
		</div>
	</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

柳絮飞祭奠

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定（二）

wzs298的专栏

09-09

1万+

这次来些稍微复杂点的功能需求： 1、在info旁边的输入框中输入数字，根据数字的多少来动态显示这部分输入框；其中，check部分的输入框初始是没有的（当然，也可以有！）； 2、每点击一次增加按钮，下方就出现一行输入框； 3、当点击删除按钮，即删除对应行的输入框； 4、点击打印按钮，收集所有数据，并打印到控制台中； ===========================

angularjs下ng-repeat点击元素改变样式实现

Maci_yera的博客

07-21

4105

1.一个angularjs的学习，了解ng-class的使用技巧；2.代码： html： <div ng-repeat='myimg in myimgs'> <img ng-src="{{myimg}}" ng-click="fabricChoose($index)" ng-class="{fabricImg1:$index==fabricIsSelected}"> <

参与评论您还未登录，请先登录后发表或查看评论

在ng-repeat下使用ng-class动态设置表格td字体样式

Hard__ball的博客

08-27

1022

最近项目刚好遇到在ng-table下使用ng-repeat下使用ng-class动态设置td标签字体颜色直接上代码：如果要根据不同情况进行多个样式设置就在每个样式中间加上逗号就好。另外，还需要在html里添加style ...

用ng-repeat实现动态的ion-tab

qq_36700462的博客

07-06

372

楼主本人用ionic1开发公司的app,功能需求要动态的显示选项卡栏，所以很自然的想到了用ng-repeeat去循环获取后台数据。用ng-repeat动态显示数据是ok的，那么问题来了：选项卡栏正选是可以正常显示ion-view里面的内容的。但是反着选则显示不出内容。楼主百度了许久得不到答案。后来灵光乍现，引起这个问题可能是因为ng-repeat后的ion-view相当于公用的。正选的时候...

angular ng-repeat点击切换样式，浅谈track by $index

weixin_30315905的博客

07-18

215

前言 angular ng-repeat点击切换样式，ng-repeat点击切换class样式，巧用ng-repeat track by $index。 1.问题一个ul包含多个li，li通过ng-repeat循环得到，其中一个li默认带有class样式，通过点击让这个class进行切换。 2.实现 ng-repeat默认可以获取到每个循环元素的索引，通过点击获取到当前元素的索引，结合...

angularjs下ng-repeat点击元素改变样式的实现方法

10-18

总结起来，通过结合`ng-repeat`、`ng-class`以及适当的CSS和JavaScript逻辑，我们可以实现点击AngularJS中的元素并动态改变其样式的效果。这种方法在创建可交互的列表和网格视图时非常有用，能够提供良好的用户体验...

angularJs使用ng-repeat遍历后选中某一个的方法

10-17

它将`selected`变量设置为`dName`，使得与之匹配的按钮通过`ng-class`添加`deptDivOnclick`类，从而改变样式。最后，CSS代码用于定义按钮的基本样式和选中状态的样式： ```css .deptDiv { margin: 10px; width:...

Angularjs使用ng-repeat中$even和$odd属性的注意事项

11-26

在示例中，`ng-class` 用于根据 `$even` 和 `$odd` 的值动态地改变元素的CSS类。当 `$even` 为 `true` 时，添加 `even` 类，将背景色设为蓝色；当 `$odd` 为 `true` 时，添加 `odd` 类，将背景色设为红色。这样就...

使用箭头键在ng-repeat中实现行选择的教程

当列表项被选中时，我们还可以通过 ng-class 指令，根据选中状态动态添加 css 类来改变选中项的样式，如下： ```css .selected { background-color: #009688; /* 一个明显的高亮颜色 */ color: white; } ``` ...

Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法

10-18

在Angularjs中，我们经常需要在使用`ng-repeat`指令来动态生成列表时，为列表中的复选框添加选中状态的样式。这篇文章主要讲述了在使用`ng-repeat`生成复选框列表时，如何根据复选框的选中状态来切换不同的样式。 #...

angularjs中使用ng-repeat渲染最后一个li的时候设置不同样式

svygh123的专栏

05-06

7865

如题所示，比如我要在下面的代码的最后一个li节点添加一个样式 {{remark.name}} 那么我就可以这样加 ng-class="{'ant-timeline-item-last':$last}"> {{remark.name}} 还有一种方法就是使用js计算的方法 {{remark.name}} Controller中的代码定义是这样 $scope.isLast

AngularJS_ng-repeat改变某个的背景颜色

fengsuiyingdong的专栏

05-21

3301

一、功能类似如下描述如图所示，上面的5个块，用ng-repeat循环输出，怎样实现当点击某一块（如块2）时，该块的背景颜色变为红色？其他的块的颜色不变。实现方法： html Code {{tableType.name}}

angularJs中的ng-class动态改变样式

泠泠似水

05-28

1万+

exam1.html<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <style> .lock { background : #dcdcdc; } .red {

AngularJS中获取ng-repeat动态生成的ng-model值