ng-true-value注意问题

在使用angular.js(版本1.4.6)时,以下代码在渲染时出现异常:

<input type='checkbox' ng-model='cbValue'
				ng-true-value="{{someText}}" ng-false-value="BUMMER">
			Checkbox Value:{{cbValue}}

 异常信息片段截取:

angular.js:12450Error: [ngModel:constexpr] http://errors.angularjs.org/1.4.6/ngModel/constexpr?p0=ngFalseValue&p1=BUMMER
    at Error (native)
    at http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:6:416
    at Hd (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:166:318)
    at Rd.checkbox (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:248:283)
    at link.pre (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:249:255)
    at $ (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:73:89)
    at K (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:61:354)
    at h (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:54:410)
    at K (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:61:487)
    at h (http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js:54:410) <input type="checkbox" ng-model="cbValue" ng-true-value="{{someText}}" ng-false-value="BUMMER" class="ng-pristine ng-untouched ng-valid">

 查看文档之后,发现自从1.3版本以后,对input[checkbox]标签的ng-true-value,ng-false-value指令不支持动态表达式,仅能使用常量,以下改写之后生效:

<input type='checkbox' ng-model='cbValue'
				ng-true-value="'PERFECT'" ng-false-value="'BUMMER'">
			Checkbox Value:{{cbValue}}

 对checkbox的值检测或绑定最好在Controller里写,在标签中使用指令比较不方便。

 

 

好的,我可以给你一个示例程序,该程序使用了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、付费专栏及课程。

余额充值