ng-true-value注意问题

最新推荐文章于 2022-08-21 23:50:48 发布
最新推荐文章于 2022-08-21 23:50:48 发布
阅读量504 收藏
点赞数
分类专栏： Js开发 文章标签： angular.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yh_honored/article/details/84771938
版权

在使用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里写，在标签中使用指令比较不方便。

 

 

yh_honored
关注
专栏目录
angular中的常见指令ng-if、ng-class、ng-options、ng-value、ng-click
learning_web的博客
08-26 1095
这里是修真院前端小课堂，每篇分享文从 八个方面深度解析前端知识/技能，本篇分享的是： 【angular中的常见指令ng-if、ng-class、ng-options、ng-value、ng-click】 大家好，我是 IT 修真院上海分院第八期的学员何岳，一枚正直纯洁善良的web程序员 今天给大家分享一下，修真院官网 JS任务八，深度思考中的知识点——angular中的常见指令ng-if、ng-c...
Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
learning_web的博客
06-17 691
这里是修真院前端小课堂，每篇分享文从 八个方面深度解析前端知识/技能，本篇分享的是： 【Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？】 目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍 指令是一个Dom元素上的标签(和元素上的属性,C...
Angularjs checkbox的ng属性
weixin_34417183的博客
04-11 170
angularjs 默认给 input[checkbox] 元素定制了一些属性，如： &lt;input type="checkbox" ng-mudel="name" ng-true-value="yes" ng-false-value="no" ng-change="fn()"&gt; ng-mudel 属性是Angularjs里面最常见的属性了，是用来数据双向绑定的属性。
Angularjs checkbox ng-true-value不支持中文
weixin_33912246的博客
07-27 129
2019独角兽企业重金招聘Python工程师标准>>> ...
angular ng-true-value和ng-false-value
Eighteen Z
04-25 3529
angular中的checkbox angular中我们在使用checkbox的时候通常是两个状态 选中为true 取消选中为false 当我们需要在选中和非选中的时候获取不一样的值的时候就需要ng-true-value和ng-false-value 了 具体使用规则如下： &lt;input type="checkbox" ng-model="open" ng-true-value...
angular ng-true-value 的作用
林楠楠的脚趾有点咸的博客
06-13 1万+
当我们点击checkbox 选中复选框时，ng-model 的绑定默认值是true，取消选中时为false.<input ng-model="checkboxModel" type="checkbox" >//选中时，checkboxModel 等于 true如果我们需要获取的值为字符串或者数字呢？那么就需要用到 ng-true-value 和ng-false-value选中checkbox 时：<
AngularJS1.0——基本认识
武汉小喽啰
02-02 2959
1. 简介 AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。 AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等 2.AngularJS四大特征 2.1MVC模式 Angula...
ng-alain的sf如何自定义部件的流程
10-15
在开发基于Angular的项目时，ng-alain是一个非常流行的企业级后台管理模板，它提供了丰富的功能和组件。本文将深入探讨ng-alain中sf（Simple Form）如何自定义部件，帮助开发者更好地满足特定需求。 一、自定义部件...
ng-options和ng-checked在表单中的高级运用(推荐)
10-20
在AngularJS中，ng-options和ng-checked是两个非常重要的指令，它们在构建动态表单时起着关键作用。本文将深入探讨这两个指令的高级用法，帮助开发者更好地理解和利用它们的功能。 首先，我们来看ng-options。ng-...
angularJs的ng-class切换class
12-29
在angular中为我们提供了3种方案处理class： 1：scope变量绑定 2：字符串数组形式。 3：对象key/value处理。...<span ng-class={true: ng-click=isActive>赛事介绍 <span ng-class={true: 'btn02 ',
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
01-19
如下所示： ng-true-value=1 //代表选中的时候，值为1 ng-false-value=0 //代表未选中的时候，值为0 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> [removed][removed] </head> <body> <div ng-app=module ng-controller=ctrl> 游戏: <input type=checkbox ng-model=data.game ng-true-value=
ng-true-value
weixin_34390105的博客
01-11 60
2019独角兽企业重金招聘Python工程师标准>>> ...
input中关于true-value&false-value
weixin_44707050的博客
08-21 861
这时变更toggle的值yes/no即可切换。当选中，设置true-value为yes。未选中，设置false-value为no。
Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
Martin 的博客
04-16 1万+
我之前文章：https://blog.csdn.net/qq_36279445/article/details/78706784当时没解决好。 全部禁用不太好，毕竟开发模式下完美点比较好我遇到的问题是一个输入框，回车事件触发验证，检查输入内容与某个值是否相等，不相等的好久修改input样式代码如下ng应该是render了input之后，判断了里面的值并且已经完成了。但是呢， 我一按回车，校验之后修...
ngModel:numfmt及ng-true-value、ng-false-value勾选错误
FBm的博客
07-11 1499
angularjs 报 ngModel:numfmt 错 Error: [ngModel:numfmt] http://errors.angularjs.org/1.5.5/ngModel/numfmt?p0=1 at Error (native) at http://192.168.1.21:8020/AngularJS/js/angular.min.js:6:412 ...
深究AngularJS——ng-checked（回写：带真实案例代码）
热门推荐
爱雨轩
05-13 1万+
1.需求在添加页面实现一个checkbox的选择，然后在详情页面展示时，会自动选上之前被选中的。2.添加页面看官最好将这个代码复制过去看看效果。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></s
angular之ng-value指令
十年之约
12-18 3322
ng-value
Error: [ngModel:constexpr] 的解决办法
12-30 2137
angular中遇到这个错误，  原代码为 出错原因为 ng-true-value和 ng-false-value可以接收的数据为字符串常量时，需要加上单引号‘ 修改后的代码
编写一个Angular程序，使用ng-zorro-antd组件库中的7种组件实现相应的功能。
最新发布
05-25
好的，我可以给你一个示例程序，该程序使用了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、付费专栏及课程。

余额充值