<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. 小型Web应用扫描工具Grabber

    小型Web应用扫描工具Grabber   Grabber是Kali Linux集成的一款Web应用扫描工具.该工具适合中小Web应用,如个人博客.论坛等.该工具使用Python语言编写,支持常见的漏洞 ...

  2. [POJ 1739] Tony's Tour

    Link: POJ 1739 传送门 Solution: 这题除了一开始的预处理,基本上就是插头$dp$的模板题了 由于插头$dp$求的是$Hamilton$回路,而此题有起点和终点的限制 于是可以构 ...

  3. 【最大流】【费用流】bzoj1834 [ZJOI2010]network 网络扩容

    引用题解: 最大流+费用流. 第一问最大流即可. 第二问为“最小费用最大流”. 由题意,这一问的可转化为在上一问的“残量网络”上,扩大一些边的容量,使能从新的图中的最大流为k. 那么易得:对于还有剩余 ...

  4. python3中zipfile模块的常用方法

    一.zipfile模块的简述 zipfile是python里用来做zip格式编码的压缩和解压缩的,由于是很常见的zip格式,所以这个模块使用频率也是比较高的, 在这里对zipfile的使用方法做一些记 ...

  5. 解决ThinkPHP3.2.3框架,PDO驱动查询出来的字段名全是小写的bug

    找到文件:ThinkPHP\Library\Think\Db\Driver.class.php 找到代码: // PDO连接参数 protected $options = array( PDO::AT ...

  6. Matlab中向量场的绘制

    % quiver(x,y,u,v) % x,y是包含坐标位置的矩阵,而u和v则是包含偏导数的矩阵. % 例如绘制f(x,y)=y-3x-2x^2-3xy-3y^2的方法: % 先用gradient函数 ...

  7. Activiti 5.22 spring

    <!-- activiti依赖 --> <dependency> <groupId>org.activiti</groupId> <artifac ...

  8. 利用“进程注入”实现无文件复活 WebShell

    引子 上周末,一个好兄弟找我说一个很重要的目标shell丢了,这个shell之前是通过一个S2代码执行的漏洞拿到的,现在漏洞还在,不过web目录全部不可写,问我有没有办法搞个webshell继续做内网 ...

  9. 怎样用bat批量重命名文件夹和文件

    很早以前本人写过重命名文件夹的文章,发现其中稍有不完善的地方,其主要功能在文件夹名前统一加上字符,或者在文件夹名后统一加上字符,有网友反应功能太单一.今天我又仔细研究了一下bat批处理代码,分别能完全 ...

  10. 表格中的IE BUG

    在表格应用了跨列单元格后,在IE6/7下当跨列单元格中的元素长度超过其跨列单元格中第一个单元格的宽度时会产生换行,如下所示: 解决方法: 1. 设置 table 的 'table-layout' 特性 ...