[Angularjs]ng-class,ng-class-even,ng-class-odd
发布时间：2020-12-17 10:36:05 所属栏目：安全 来源：网络整理
导读：写在前面 系列文章 一个例子 class .list /spanspan style="background-color: #f5f5f5; color: #000000;"gt;{/spanspan style="background-color: #f5f5f5; color: #ff0000;"gt; margin/spanspan style="background-color: #f5f5f5; color: #000000;"gt;:/s
写在前面
系列文章
一个例子
class
.list </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 8px auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 90%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.even </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightgray</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.odd </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> lightgreen</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></ <span style="color: #800000;">head<span style="color: #0000ff;">><span style="color: #0000ff;"><<span style="color: #800000;">body<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">ng-class<span style="color: #0000ff;">="'main'"<span style="color: #ff0000;"> ng-controller<span style="color: #0000ff;">="ColorController"<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">h2<span style="color: #0000ff;">>示例一<span style="color: #0000ff;"></<span style="color: #800000;">h2<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">table <span style="color: #ff0000;">ng-class<span style="color: #0000ff;">="'list'"<span style="color: #ff0000;"> border<span style="color: #0000ff;">="1"<span style="color: #ff0000;"> cellpadding<span style="color: #0000ff;">="0"<span style="color: #ff0000;"> cellspacing<span style="color: #0000ff;">="0"<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">tr<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>ID<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>姓名<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>年龄<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">tr<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">tr <span style="color: #ff0000;">ng-repeat<span style="color: #0000ff;">="user in users"<span style="color: #ff0000;"> ng-class-even<span style="color: #0000ff;">="'even'"<span style="color: #ff0000;"> ng-class-odd<span style="color: #0000ff;">="'odd'" <span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>{{user.id}}<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>{{user.name}}<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>{{user.age}}<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">tr<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">table<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">h2<span style="color: #0000ff;">>示例二<span style="color: #0000ff;"></<span style="color: #800000;">h2<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">table <span style="color: #ff0000;">ng-class<span style="color: #0000ff;">="'list'"<span style="color: #ff0000;"> border<span style="color: #0000ff;">="1"<span style="color: #ff0000;"> cellpadding<span style="color: #0000ff;">="0"<span style="color: #ff0000;"> cellspacing<span style="color: #0000ff;">="0"<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">tr<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>ID<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>姓名<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">th<span style="color: #0000ff;">>年龄<span style="color: #0000ff;"></<span style="color: #800000;">th<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">tr<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">tr <span style="color: #ff0000;">ng-repeat<span style="color: #0000ff;">="user in users"<span style="color: #ff0000;"> ng-class<span style="color: #0000ff;">="($index+1)%2==0?'even':'odd'"<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>{{user.id}}<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>{{user.name}}<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">> <span style="color: #0000ff;"><<span style="color: #800000;">td<span style="color: #0000ff;">>{{user.age}}<span style="color: #0000ff;"></<span style="color: #800000;">td<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">tr<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">table<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>
总结
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
