<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. [BZOJ 4057] Kingdoms

    Link: BZOJ 4057 传送门 Solution: 一道比较基础的状压DP 看到$n<=20$,状态转移与顺序相关,就可以开心地状压了 1表示破产,0表示未破产,不断扩展破产的集合即可 ...

  2. [Contest20180314]数列

    数据范围告诉我们要写两档的分 第一档:$M\leq200,N\leq10^9$,可以枚举$m$计算答案 直接矩阵快速幂:$O\left(M^4\log_2N\right)$,会超时,所以我们需要某些“ ...

  3. [CF919E]Congruence Equation

    题意:求关于$n$的方程$n\cdot a^n\equiv b\left(mod\ p\right)$在$[1,x]$中整数解的数量 果然是Chinese round,interesting roun ...

  4. 1.6(学习笔记)EL表达式

    1.表达式输出属性 先来看一个简单的表达式小例子 el.jsp <%@ page language="java" contentType="text/html; c ...

  5. 1.8(学习笔记)监听器(Listener)

    一.监听器简介 监听器是web容器对某一些对象的监听,当某些对象发生创建.修改.删除的动作时, web容器会自动调用对应的监听器中的方法. 例如A是监听器,B是被监听对象,A的监听任务是B回家时来开门 ...

  6. 网络采集软件核心技术剖析系列(2)---如何使用C#语言获得任意站点博文的正文及标题

    一 本系列随笔概览及产生的背景 本系列开篇受到大家的热烈欢迎,这对博主是莫大的鼓励,此为本系列第二篇,希望大家继续支持,为我继续写作提供动力. 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受 ...

  7. 《VC++就业培训宝典之MFC视频教程》学习笔记

    开发环境:Win7 64位 + VS2013 第三章第二节视频 在Win32工程中学习MFC开发,编译问题: Building MFC application with /MD[d] (CRT dll ...

  8. 《新一代视频压缩码标准-H.264_AVC》读书笔记1

    摘要 第一章 绪论 正文 1.一般而言,视频信号信息量大,传输网络所需要的带宽相对较宽.例如,一路可视电话或会议电视信号,由于其活动内容较少,所需带宽较窄,但要达到良好质量,不压缩约需若干 Mbps, ...

  9. access 数据更新语句

    UPDATE YS_POINT AS a, YS_LINE AS b SET a.管线高程 = b.SELEV1WHERE (((a.物探点号)=[b].[起点号]));

  10. 怎么在VS2010中打开VS2013的项目

    其实VS2010与VS2013上的sln文件没有本质的区别.打不开的原因是什么呢?其实原因很简单,两者开头的软件信息不同.因此造成低版本VS的不识别. VS2013版本vs.sln文件开头的软件信息: ...