angular4 radio checkbox 有用
<span *ngFor="let op of [{'id':'a','text':'11'},{'id':'b','text':'2222'},{'id':'cc','text':'3333'}]" class="form-check">
<input type="checkbox" [name]="value" [checked]="model.indexOf(op.id) > -1" (click)="setValue(op)"
[value]="op.id"/>{{op.text}}{{model| json}}
</span>
setValue(option: any) {
const {id} = option;
const index = this.model.indexOf(id);
if (index > -1) {
// 有则移出
this.model.splice(index, 1);
this.onChange(this.model); // 需更新绑定的值
} else {
// 无则添加
this.model.push(id);
this.onChange(this.model); // 需更新绑定的值
}
}
<!-- <span *ngFor="let op of [{'id':'a','text':'a11'},{'id':'b','text':'bbb'}]" class="form-check">
<input type="radio" [(ngModel)]="value" name="value" [value]="op.id" />
{{value}}{{op.text}}
</span> -->
angular4 radio checkbox 有用的更多相关文章
- :radio :checkbox
匹配所有单选按钮 示例 描述: 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input typ ...
- jSP的3种方式实现radio ,checkBox,select的默认选择值。
jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...
- 检查radio/checkbox是否至少选择一项
//---------------------------------------------------------- // 功能:检查radio/checkbox是否至少选择一项 // 参数: / ...
- 微信小程序 - radio/checkbox自定义组件
更新 2019-01-26:首次发布 2019-01-27:增加默认取值选中radio/checkbox,checkbox需在onload取值 2019-01-28:增加radio取值不存在红色提示和 ...
- 【TP3.2+onethink】radio+checkbox+select 空间 编辑页面选中,附录 js 返回上一页
1.TP3.2框架 如何实现 [radio+checkbox+select 空间 编辑页面选中],说实话,比较繁琐,不咋地!! 不废话,上代码:(其中 XX_arr 变量一维数组) <div ...
- jQuery radio|checkbox的取值与赋值
文章简单即是美[我说的是技术博客] |--radio |--checkbox 参考: http://blog.csdn.net/gd2008/article/details/6951208 h ...
- 自定义radio/checkbox样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
- jquery 判断多组radio checkbox是否选中
最近要做一个问卷调查的小页面,需要判断用户是否每项都有选择,如果每个都挨个判断很苦逼,所以网上搜了搜,自己也总结了一下,写了一段小代码~哈哈,水平有限大家见谅.html代码就不上了,N多单选和多选框就 ...
随机推荐
- 奶牛与农夫John与oj
当蒟蒻的我悲惨的发现oj出现大量的奶牛与农夫时,觉得早晚usaco要占领oj,于是绝望的开始记录农夫与奶牛的题目……. 一道usaco月赛的题…在oj用作练习二维数组,虽然数据的大量字符确实很让人不爽 ...
- SPOJ BGSHOOT - Shoot and kill (线段树 区间修改 区间查询)
BGSHOOT - Shoot and kill no tags The problem is about Mr.BG who is a great hunter. Today he has gon ...
- c++基础学习之函数与参数
1.传值参数 //传值参数 int Abc(int a,int b,int c) { ; } a,b和c是函数Abc 的形式参数formal parameter,类型均为整型.如果在如下语句中调用函数 ...
- 转 select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET
select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复用输入/输出模型,原型:int select(int maxfd,fd_set *rdset ...
- Scala实战高手****第13课:Scala模式匹配实战和Spark源码鉴赏
package com.dt.spark.scala.bascis class Dataframework case class Computerframework (name:String,popu ...
- ajax变量作用域的问题
需求:使得一个变量在ajax内外都有作用域 方法:设置为同步请求 async:false
- Windows 系统下设置Nodejs NPM全局路径和环境变量配置
在nodejs的安装目录中找到node_modules\npm\.npmrc文件 修改如下即可: prefix = D:\tool\nodejs\node_globalcache = D:\tool\ ...
- iOS开发——Autolayout下动态调整单元格高度
情景描述: 有时候我们希望更新某一个单元格的数据,通常的做法是使用reloadData方法更新整个单元格.但是对一些情况是不适用的或者说实现起来比较麻烦.比如说这种简单的"点开"一 ...
- P2P通信标准协议(二)之TURN
上一篇P2P通信标准协议(一)介绍了在NAT上进行端口绑定的通用规则,应用程序可以根据这个协议来设计网络以外的通信. 但是,STUN/RFC5389协议里能处理的也只有市面上大多数的Cone NAT( ...
- 扑克模拟,牌型判断java版
Card类 package com.company; public class Card { private String color; private Integer value; public S ...