10.ng-class-even与ng-class-odd

本文介绍如何使用AngularJS中的ng-class-even与ng-class-odd指令为ng-repeat生成的列表项自动切换不同样式,通过示例代码展示了如何实现列表项背景颜色的交替变化。

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

转自:https://www.cnblogs.com/best/tag/Angular/

AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素

ng-class-even与ng-class类似,ng-repeat中偶数时应用

ng-class-odd与ng-class类似,ng-repeat中奇数时应用

<p ng-repeat="a in animals" ng-class-odd="'odd'" ng-class-even="'even'">
   {{a.name}}
</p>

示例代码:

 1 <!DOCTYPE html>
 2 <!--指定angular管理的范围-->
 3 <html ng-app="app01">
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>指令</title>
 7         <style>
 8             .bg1{
 9                 background: lightcoral;
10                 color:white;
11             }
12             .bg2{
13                 background: lightpink;
14                 color: white;
15             }
16         </style>
17     </head>
18     <body>
19         <!--指定控制器的作用范围-->
20         <form ng-controller="Controller1" name="form1">
21             <ul>
22                 <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'">
23                     {{u.name}}
24                 </li>
25             </ul>
26         </form>
27         <!--引入angularjs框架-->
28         <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
29         <script type="text/javascript">
30             //定义模块,指定依赖项为空
31             var app01 = angular.module("app01", []);
32             //定义控制器,指定控制器的名称,$scope是全局对象
33             app01.controller("Controller1", function($scope) {
34                 $scope.users = [{
35                     id: 1,
36                     name: "tom",
37                     sex: "男",
38                     age: 19
39                 }, {
40                     id: 2,
41                     name: "rose",
42                     sex: "女",
43                     age: 18
44                 }, {
45                     id: 7,
46                     name: "jack",
47                     sex: "男",
48                     age: 16
49                 }, {
50                     id: 9,
51                     name: "lucy",
52                     sex: "女",
53                     age: 20
54                 }, {
55                     id: 15,
56                     name: "mark",
57                     sex: "男",
58                     age: 89
59                 }];
60             });
61         </script>
62     </body>
63 </html>

运行结果:

<template> <view class="member-query"> <view class="header"> <text class="title">会员查询</text> <uni-icons type="help" size="22" color="#999" /> </view> <view class="search-card"> <view class="input-box"> <uni-icons type="search" size="22" color="#999" class="search-icon" /> <input class="search-input" placeholder="请输入卡号/手机号/会员号" /> </view> <button class="search-btn">搜索</button> </view> <view class="action-buttons"> <button class="action-btn" @click="handleScan"> <uni-icons type="scan" size="22" color="#007AFF" /> <text>扫描会员码</text> </button> <button class="action-btn" @click="handleReadCard"> <uni-icons type="card" size="22" color="#007AFF" /> <text>读卡</text> </button> </view> <view class="info-card" v-if="memberInfo"> <view class="info-header"> <text class="name">{{ memberInfo.name }}</text> <view class="status-badge"> <text>{{ memberInfo.status }}</text> </view> </view> <view class="info-grid"> <view class="info-item"> <text class="label">等级</text> <text class="value">{{ memberInfo.level }}</text> </view> <view class="info-item"> <text class="label">手机</text> <text class="value">{{ memberInfo.phone }}</text> </view> <view class="info-item"> <text class="label">性别</text> <text class="value">{{ memberInfo.gender }}</text> </view> <view class="info-item"> <text class="label">注册时间</text> <text class="value">{{ memberInfo.registerDate }}</text> </view> </view> <view class="assets-section"> <text class="section-title">账户资产</text> <view class="log-section"> <view class="log-header"> <text>所属门店</text> <text>本币</text> <text>赠币</text> </view> <view v-for="(log, index) in huiyuanlogs" :key="index" class="huiyuanlog-row"> <text>{{ log.name }}</text> <text>{{ log.currency }}</text> <text>{{ log.giftCurrency }}</text> </view> </view> </view> </view> <view class="log-section" v-if="logs.length > 0"> <text class="section-title">会员日志</text> <view class="log-header"> <text>序号</text> <text>本币</text> <text>赠币</text> <text>备注</text> <text>时间</text> </view> <view v-for="(log, index) in logs" :key="index" class="log-row"> <text>{{ log.id }}</text> <text>{{ log.currency }}</text> <text>{{ log.giftCurrency }}</text> <text>{{ log.remark }}</text> <text>{{ log.time }}</text> </view> </view> </view> </template> <script> export default { data() { return { memberInfo: { level: '普通会员', phone: '132****3113', gender: '男', registerDate: '2025-07-18', name: '张会员', status: '状态:正常', store: '卡皮巴拉乐园(宜兴店)', currency: '100', giftCurrency: '100' }, logs: [ { id: 1, currency: '+180', giftCurrency: '+100', remark: '游客转会员', time: '2025.7.18 14:30' }, { id: 2, currency: '-38', giftCurrency: '0', remark: '消耗币数:牛仔很忙', time: '2025.7.19 10:15' }, { id: 3, currency: '-38', giftCurrency: '0', remark: '消耗币数:牛仔很忙', time: '2025.7.20 15:20' } ], huiyuanlogs: [ { id: 1, currency: '180', giftCurrency: '100', name: '卡皮巴拉乐园(无锡宜兴店)' }, { id: 2, currency: '38', giftCurrency: '0', name: '卡皮巴拉乐园(无锡宜兴店)' }, { id: 3, currency: '38', giftCurrency: '0', name: '卡皮巴拉乐园(无锡宜兴店)' } ] } }, methods: { handleScan() { uni.scanCode({ success: (res) => { console.log('扫描结果:', res.result); } }); }, handleReadCard() { uni.showToast({ title: '读卡功能', icon: 'none' }); } } } </script> <style scoped> .member-query { padding: 30rpx; background: #f8fcff; min-height: 100vh; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40rpx; } .title { font-size: 46rpx; font-weight: bold; color: #333; } .search-card { display: flex; background: #fff; border-radius: 24rpx; padding: 20rpx; margin-bottom: 30rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03); } .input-box { flex: 1; position: relative; } .search-icon { position: absolute; left: 25rpx; top: 50%; transform: translateY(-50%); z-index: 2; } .search-input { width: 100%; height: 90rpx; background: #f8f9ff; border-radius: 16rpx; padding: 0 30rpx 0 70rpx; font-size: 32rpx; border: 2rpx solid #f0f0f0; } .search-btn { width: 160rpx; height: 90rpx; background: linear-gradient(to right, #007AFF, #00a8ff); color: white; font-size: 32rpx; border-radius: 16rpx; margin-left: 120rpx; box-shadow: 0 6rpx 12rpx rgba(0, 122, 255, 0.2); border: none; } .action-buttons { display: flex; gap: 30rpx; margin-bottom: 40rpx; } .action-btn { flex: 1; height: 90rpx; background: #f8f9ff; color: #007AFF; font-size: 32rpx; border-radius: 16rpx; display: flex; justify-content: center; align-items: center; border: 2rpx solid #e6f7ff; } .action-btn text { margin-left: 15rpx; } .info-card { background: #fff; border-radius: 24rpx; padding: 40rpx 30rpx; margin-bottom: 40rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03); } .info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40rpx; padding-bottom: 30rpx; border-bottom: 2rpx solid #f8f8f8; } .name { font-size: 42rpx; font-weight: bold; color: #333; } .status-badge { background: #e6f7ff; border-radius: 30rpx; padding: 10rpx 25rpx; font-size: 28rpx; color: #007AFF; border: 2rpx solid #b3e0ff; } .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30rpx; margin-bottom: 40rpx; } .info-item { background: #f8f9ff; border-radius: 16rpx; padding: 25rpx; border: 2rpx solid #f0f0f0; } .label { font-size: 28rpx; color: #999; display: block; margin-bottom: 10rpx; } .value { font-size: 32rpx; font-weight: 500; color: #333; } .section-title { font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; display: block; } .assets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rpx; } .asset-item { background: #f8f9ff; border-radius: 16rpx; padding: 25rpx; text-align: center; border: 2rpx solid #f0f0f0; } .asset-label { font-size: 28rpx; color: #999; display: block; margin-bottom: 15rpx; } .asset-value { font-size: 36rpx; font-weight: bold; display: block; } .currency { color: #007AFF; } .gift { color: #ff6b6b; } .assets-section .log-header, .assets-section .huiyuanlog-row { grid-template-columns: 10fr 1.5fr 1.5fr; /* 调整比例 */ padding: 20rpx 30rpx; /* 增加左右内边距 */ } .log-section { background: #fff; border-radius: 24rpx; padding: 40rpx 30rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03); } .log-header, .log-row { display: grid; grid-template-columns: 0.8fr 1fr 1fr 2fr 1.5fr; gap: 15rpx; font-size: 28rpx; padding: 20rpx 0; } .log-header { font-weight: bold; color: #333; border-bottom: 2rpx solid #f8f8f8; margin-bottom: 10rpx; } .log-row:nth-child(odd) { background-color: #f8f9ff; border-radius: 12rpx; } .log-row text:nth-child(2) { color: #ff6b6b; font-weight: bold; } </style>账户资产列表隔行设置变色
07-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值