`

ng-repeat动态改变样式

AngularJs 
阅读更多
当我们使用AngularJs的ng-repeat时候动态绑定数据时，遇到遍历出来的标签样式都一样，这时候希望根据数组的下标分别对应不同的样式
解决：使用$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>
分享到：
| AngularJS的select设置默认值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

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

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

    angularjs ng-class

    `ng-class`的一个常见应用场景是与其它AngularJS指令结合，如`ng-repeat`，在循环中根据每个项目的状态来改变样式。例如，我们可以标记列表项中的选中项目： ```html &lt;li ng-repeat="item in items" ng-class="{...

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

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

    angualrJS ngsorttable

    **AngularJS ng-sorttable** 是一个用于AngularJS应用的表格排序插件，它允许用户对数据表格中的列进行动态排序，提升用户体验并便于数据管理。这个插件是基于AngularJS的`ng-repeat`指令和`ng-click`事件来实现功能...

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

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

    AngularJS 最常用的八种功能

    **功能概述**：`ng-repeat` 是 AngularJS 中非常强大的一个指令，它允许你遍历数组或对象，并且能够在视图层动态地展示出数组或对象中的每一项。 **应用场景**：通常用于创建列表（如表格、无序列表或有序列表）。 ...

    angularjs实现动态表格

    例如，你可以根据某个字段的值来改变单元格的背景色或字体样式。 此外，`ng-model`可用于将表格中的数据双向绑定到模型，使用户输入能够实时更新后台数据。若需要进行排序、分页或过滤操作，可以使用`ng-repeat`的...

    浅谈AngularJS中ng-class的使用方法

    AngularJS 是一个非常流行的前端框架，由 Google 团队开发，其目的是为了帮助开发人员使用模型-视图-控制器（MVC）...通过使用ng-class，开发者可以根据不同的条件动态地改变元素的样式，使Web页面更加生动和交互性强。

    AngularJS入门教程之表格实例详解

    总结一下，AngularJS的表格功能通过`ng-repeat`指令实现了动态数据展示。结合`$http`服务从服务器获取数据，我们可以轻松创建响应式的表格。同时，利用CSS样式可以进一步提升表格的视觉效果。此外，双向数据绑定使得...

    Hands-On With AngularJS Using ASP.NET.pdf

    10. 动态改变样式和表单验证 内容将涵盖如何在AngularJS中使用ng-class和ng-style指令动态地改变元素样式，以及如何使用ng-dblclick指令来处理双击事件。 11. 使用ng-disabled和ng-switch指令 ng-disabled用于禁用...

    AngularJS教程 ng-style 指令简单示例

    5. **组合使用**：`ng-style`可以与其他指令一起使用，如`ng-if`或`ng-repeat`，以实现更复杂的样式逻辑。 6. **优先级**：内联样式通常具有比外部样式表更高的优先级。因此，使用`ng-style`设置的样式会覆盖同名的...

    AngularJS参考手册

    - **ng-style**：动态设置元素的样式。 - **ng-submit**：定义表单提交时的行为。 - **ng-switch**：基于表达式的值切换不同的HTML结构。 - **ng-transclude**：用于插入模板内容的位置。 - **ng-value**：设置`...

    基于AngularJS制作的购物车商品数量加减后自动计算总价效果源码.zip

    例如，`ng-model`指令用于绑定控件到特定的数据模型，`ng-repeat`用于遍历数组并创建多个DOM元素，`ng-click`则用于响应用户的点击事件。在购物车的场景下，每个商品项可能都有一个`ng-repeat`来迭代显示，而商品...

    开源项目-microo8-golymer.zip

    2. **属性指令**：除了简单的数据绑定，还可以使用属性指令如`if`或`class`来控制元素的显示或样式，这些指令可以根据当前项的数据动态改变。 3. **事件处理**：在重复的元素内，可以监听和响应事件。这样，当用户...

    AngularJS学习笔记——与用户交互的动态清单列表

    2. **动态显示待办事项个数**：为了实时显示待办事项的个数，我们可以使用`ng-repeat`指令遍历列表，并结合`filter`过滤器来计算未完成的任务数量。例如，假设我们有一个名为`todos`的数组，我们可以这样实现： ```...

    Angularjs 实现移动端在线测评效果(推荐)

    同时，我们需要一个进度条来展示答题进度，这可以通过`ng-class`指令来动态改变样式。例如： ```html &lt;div class="process-box"&gt; &lt;li ng-repeat="question in Questions track by $index" ng-class="{active: $...

    省市区级联选择

    &lt;option ng-repeat="district in districts[city + '-' + province]" value="{{district.id}}"&gt;{{district.name}} ``` 5. **控制器逻辑**：在控制器中，我们需要定义`changeCity`和`changeDistrict`方法来处理...

    ng-phoneCat:基于Angular.js官方网站上提供的教程开发的Quick POC

    在ng-phoneCat中，诸如`ng-repeat`、`ng-click`等指令用于动态渲染手机列表和响应用户交互。 3. **服务**：Angular.js的服务提供了一种共享代码和状态的方式，比如 `$http` 服务用于进行HTTP请求获取数据，`$...

    angular示例

    这个文件可能涵盖了如何根据模型状态改变元素样式。 通过这些示例文件，学习者可以深入理解AngularJS的各个方面，从基础的模板绑定和数据驱动视图，到更高级的特性如指令和依赖注入。每个文件都提供了实际应用的上...

Magicbox
Global site tag (gtag.js) - Google Analytics