当我们使用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>

ng-repeat动态改变样式的更多相关文章

  1. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  2. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  3. [iOS开发]TextKit之动态改变样式

    在iOS中有一项功能,就是用户可以自定义设备的字体大小,粗体和其他一些样式.具体可以选择 “设置” ---- “通用” ---- “字体大小“ / “辅助功能”, 重新调整文本字体的样式. 如何使ap ...

  4. extjs动态改变样式

    { width:438, height:440, name:'loginDiv', ui:'123', x: '50%' , y: 200, border:true, bodyStyle:{ 'bor ...

  5. vue动态改变样式

    <i class="el-icon-arrow-left" :style="{'color': deadColorArr[index]}" @click= ...

  6. Windows Phone 动态改变ListBox样式

    使用ListBox时通常会借助ItemTemplate帮助我们实现更复杂多样的样式显示,体现了Xaml的灵活.如何动态改变变ListBox的样式,实现类似电脑资源管理器中列表显示和图标显示形式的替换. ...

  7. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  8. 动态改变伪元素样式的方(用:after和:before生成的元素)

    自己查资料总结的两种方法 一.纯css改变 a:hover:before{left:-20%;} a:hover:after{right:-20%;} a:before{ left:-100%; } ...

  9. 动态改变actionbar上menu的图标

    工作中遇到了一个需求是,在滚动的时候让actionbar上的图标进行变色.实现后在这里总结下思路. 一.先在主题中定义好Actionbar的style <style name="App ...

随机推荐

  1. centos更换yum源为aliyun源

    国外的yum源由于众所周知的GFW原因,有的被墙,有的很慢,阿里云依靠强大的技术优势建立了国内的开源镜像.阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ 第一步: ...

  2. listView 解决焦点冲突问题 item项和子控件之间的冲突

    listView 在item布局的顶级布局中设置 android:descendantFocusability="blocksDescendants"可以阻止子控件获取焦点 这样使 ...

  3. sql按照中文拼音排序

    select * from table order by convert(columnName using gbk) asc 注意:会导致全表扫描 建立冗余字段,插入数据时字段为convert(col ...

  4. 队列 和 线程 之GCD dispatch

    1.dispatch_queue_create  创建队列开启异步线程(1,4,2,3) // 创建一个队列 dispatch_queue_t queue = dispatch_queue_creat ...

  5. 【APT】SqlServer游标使用

    use [ElephantCredit] go begin transaction tran_bank; print '**脚本开始执行!'; declare @tran_error int , @n ...

  6. Git 安装和使用教程(更加详细)

    转载至:https://www.cnblogs.com/smuxiaolei/p/7484678.html#undefined Git 安装和使用教程 git 提交 全部文件 git add .  g ...

  7. admin 的流程 Xadmin

    提交根评论 显示根评论 --- render显示 --- ajax显示 提交子评论 显示子评论 ---- render显示 ---- Ajax显示(扩展) 评论树 博客:富文本编辑器 beautful ...

  8. Oracle_PL/SQL(4) 过程和函数

    create table s_sc ( SNAME VARCHAR2(20) primary key, c_grade NUMBER(6), m_grade NUMBER(6), e_grade NU ...

  9. vue 动态路由按需加载的三种方式

    在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...

  10. Java的OOP三大特征之一——继承

    Java的OOP三大特征之一——继承 子类继承父类的特征和行为(属性和方法),使得子类具有父类的各种属性和方法.或子类从父类继承方法,使得子类具有父类相同的行为. 特点:在继承关系中,父类更通用.子类 ...