<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 有用的更多相关文章

  1. :radio :checkbox

    匹配所有单选按钮   示例 描述: 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input typ ...

  2. jSP的3种方式实现radio ,checkBox,select的默认选择值。

    jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...

  3. 检查radio/checkbox是否至少选择一项

    //---------------------------------------------------------- // 功能:检查radio/checkbox是否至少选择一项 // 参数: / ...

  4. 微信小程序 - radio/checkbox自定义组件

    更新 2019-01-26:首次发布 2019-01-27:增加默认取值选中radio/checkbox,checkbox需在onload取值 2019-01-28:增加radio取值不存在红色提示和 ...

  5. 【TP3.2+onethink】radio+checkbox+select 空间 编辑页面选中,附录 js 返回上一页

    1.TP3.2框架 如何实现 [radio+checkbox+select 空间 编辑页面选中],说实话,比较繁琐,不咋地!! 不废话,上代码:(其中 XX_arr  变量一维数组) <div ...

  6. jQuery radio|checkbox的取值与赋值

    文章简单即是美[我说的是技术博客] |--radio   |--checkbox   参考: http://blog.csdn.net/gd2008/article/details/6951208 h ...

  7. 自定义radio/checkbox样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...

  9. jquery 判断多组radio checkbox是否选中

    最近要做一个问卷调查的小页面,需要判断用户是否每项都有选择,如果每个都挨个判断很苦逼,所以网上搜了搜,自己也总结了一下,写了一段小代码~哈哈,水平有限大家见谅.html代码就不上了,N多单选和多选框就 ...

随机推荐

  1. 潜伏者(noip09年t1)解题报告 C++

    题目描述 R 国和 S 国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动.历尽艰险后,潜伏于 S 国的 R 国间谍小 C 终于摸清了 S 国军用密码的编码规则: 1. S 国军方内部欲发送的原 ...

  2. CentOS7部署l2tp/IPsec服务

    1.安装必要的工具 yum install vim net-tools wget unzip -y 2. 下载安装脚本 wget -O StackScript.zip http://files.cnb ...

  3. 对于scanf和cin的输入输出速度的验证

    本文为https://www.byvoid.com/zhs/blog/fast-readfile的验证性文章 --------------------------------------------- ...

  4. jboss启动时java VM参数设置

    jboss服务器中jvm参数的设置: 在$JBOSS_HOME/bin下的run.sh里面存在这么一个设置: # Force IPv4 on Linux systems since IPv6 does ...

  5. [xsy2363]树

    设$f_{i,j}$表示$i$个点的树,权值为$j$且可以不选根的方案数,$g_{i,j}$表示$i$个点的树,权值为$j$且必选根的方案数 首先$g_{1,1}=0$ 我们可以把原树连上一个新的子树 ...

  6. 【进制转换】CODEVS 1740 进制计算器

    #include<cstdio> #include<iostream> #include<string> using namespace std; string s ...

  7. [美团 CodeM 初赛 Round A]数列互质

    题目大意: 给出一个长度为n的数列a1,a2,a3,...,an,以及m组询问(li,ri,ki),求区间[li,ri]中有多少数在该区间中的出现次数与ki互质. 思路: 莫队. f[i]记录数字i出 ...

  8. iOS开发——检测屏幕旋转

    步骤一.注册通知 1: [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(statusBarOrien ...

  9. OC语言基础之类的本质

    一.类的本质 1: // 类本身也是一个对象,是个Class类型的对象,简称类对象 2: 3: /* 4: 利用Class 创建 Person类对象 5: 6: 利用 Person类对象 创建 Per ...

  10. B/S架构 Web打印程序(Argox)

    B/S架构 Web打印程序 对于B/S架构下的管理软件系统,在客户端浏览器页面中如何透过本地打印机或网络打印机打印条码标签,Argox提供最常用的2种类型打印机集成方案. ●  PPLA 打印机IE游 ...