ng-class中的if else判断

来自于stackoverflow的一个问题,自己刚好用到,搬过来做个标记。原问题链接

在使用ng-class时,有些时候会碰到根据是否满足条件来设置元素的样式,使用以下方法可以达到这样的目的。

(1)使用运算符

<div ng-class="variable == 1 ? 'class1' : (variable == 2 ? 'class2' : (variable ==3 ? 'class3' : 'class4'))">
</div>

这样写无需在javascript中添加额外代码,但是需要注意的是要让代码具有良好的可读性。

(2)使用额外的方法

<div ng-class="setStyle(variable)"></div>

然后使用以下的代码: 
$scope.setStyle = function(args) {   
if(args == 1) return 'class1';   
else if(args ==2) 
return 'class2';   
else if(args == 3) 
return 'class3'; };
这样的好处是能保证html代码的干净,不会在html中嵌入逻辑。
好的,我可以给你一个示例程序,该程序使用了ng-zorro-antd组件库的7种组件,以实现一个简单的用户管理系统。 1. 安装Angular CLI 如果你还没有安装Angular CLI,那么可以使用以下命令进行安装: ``` npm install -g @angular/cli ``` 2. 创建新的Angular项目 使用以下命令创建一个新的Angular项目: ``` ng new user-management ``` 3. 安装ng-zorro-antd组件库 使用以下命令安装ng-zorro-antd组件库: ``` npm install ng-zorro-antd --save ``` 4. 配置ng-zorro-antd主题 在`styles.scss`文件添加以下内容: ```scss @import "~ng-zorro-antd/ng-zorro-antd.less"; ``` 然后,在`angular.json`文件添加以下内容: ```json "styles": [ "src/styles.scss" ], ``` 5. 创建用户管理模块 使用以下命令创建一个新的模块: ``` ng g m user-management ``` 6. 创建用户管理组件 使用以下命令创建一个新的组件: ``` ng g c user-management/user-list ``` 7. 在用户管理组件使用ng-zorro-antd组件 在`user-list.component.html`文件添加以下内容: ```html <nz-table [nzData]="users" [nzPageSizeOptions]="[10, 20, 30]" [nzPageSize]="pageSize" [nzLoading]="loading"> <thead> <tr> <th nzShowSort nzSortKey="name" (nzSortChange)="onSortChange($event)">Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <tr *ngFor="let user of users"> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.phone}}</td> </tr> </tbody> </nz-table> <nz-pagination [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" (nzPageIndexChange)="onPageIndexChange($event)" (nzPageSizeChange)="onPageSizeChange($event)"></nz-pagination> ``` 在`user-list.component.ts`文件添加以下代码: ```typescript import { Component, OnInit } from '@angular/core'; import { NzTableSortOrder } from 'ng-zorro-antd/table'; interface User { name: string; email: string; phone: string; } @Component({ selector: 'app-user-list', templateUrl: './user-list.component.html', styleUrls: ['./user-list.component.scss'] }) export class UserListComponent implements OnInit { users: User[] = [ { name: 'John Doe', email: 'john.doe@gmail.com', phone: '555-1234' }, { name: 'Jane Smith', email: 'jane.smith@gmail.com', phone: '555-5678' }, { name: 'Bob Johnson', email: 'bob.johnson@gmail.com', phone: '555-9012' }, { name: 'Alice Lee', email: 'alice.lee@gmail.com', phone: '555-3456' }, { name: 'Tom Brown', email: 'tom.brown@gmail.com', phone: '555-7890' } ]; pageIndex = 1; pageSize = 10; total = this.users.length; loading = false; sortName: string | null = null; sortOrder: NzTableSortOrder | null = null; constructor() { } ngOnInit(): void { } onPageIndexChange(pageIndex: number): void { this.pageIndex = pageIndex; } onPageSizeChange(pageSize: number): void { this.pageSize = pageSize; this.total = this.users.length; } onSortChange(event: { key: string; value: NzTableSortOrder }): void { this.sortName = event.key; this.sortOrder = event.value; this.loading = true; setTimeout(() => { this.loading = false; if (this.sortName && this.sortOrder) { this.users = this.users.sort((a, b) => this.sortOrder === 'ascend' ? a[this.sortName!] > b[this.sortName!] ? 1 : -1 : b[this.sortName!] > a[this.sortName!] ? 1 : -1 ); } else { this.users = [...this.users]; } }, 1000); } } ``` 8. 在应用使用用户管理模块 在`app.module.ts`文件添加以下代码: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgZorroAntdModule } from 'ng-zorro-antd'; import { UserManagementModule } from './user-management/user-management.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgZorroAntdModule, UserManagementModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` 9. 运行应用 使用以下命令运行应用: ``` ng serve ``` 然后,在浏览器打开`http://localhost:4200`,即可看到用户管理列表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值