<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. AtCoder - 2705 Yes or No

    Problem Statement You are participating in a quiz with N+M questions and Yes/No answers. It's known ...

  2. [CF607D]Power Tree

    题目大意: 一棵树初始只有一个编号为$1$的权值为$w_1$的根.$q(q\le2\times10^5)$次操作,每次可以给出$v,w(w<10^9)$,新建一个结点作为$v$的子结点,权值为$ ...

  3. Java 输入框复用代码

    1 int messageType=JOptionPane.INFORMATION_MESSAGE; String message=mines + " minutes is approxim ...

  4. FCL研究-LINQ-System.Linq Enumerable

    .net 里面集合操作极为方便,尤其是实现了IEnumerable接口的集合,一直在使用,系统的研究一下集合的操作也是极好的. 类型 操作符名称 投影操作符 Select,SelectMany 限制操 ...

  5. JS面向对象之闭包

    闭包 闭包的概念 闭包的含义就是闭合,简单来说就是一个具有封闭功能的结构 闭包就是具有封闭的对外不公开的,包裹结构或空间 在 js 中的闭包 在 js 中函数可以构成闭包 函数是一个代码结构的封闭结构 ...

  6. VisualSVN设置提交时必须输入log信息

    在别人的基础上修改的: 自己在Windows上用VisualSVN搭了个服务器,默认提交代码是可以不填任何信息,这可不是我所期望的,于是找到了下面的解决方案: 在VisualSVN的管理控制台中可以设 ...

  7. mac 切换默认python版本

    https://www.zhihu.com/question/30941329 首先终端的“python”命令会执行/usr/local/bin下的“python”链接,链接相当于win下的快捷方式, ...

  8. Zabbix的SNMPTrap监控配置

    SNMPTrap监控主要用于设备发生故障时的主动通知的监控.以下简单记录下Zabbix的SNMPTrap的配置方法. 一.SNMPTrap监控的处理流程说明 1.监控对象发送SNMPTrap信息到sn ...

  9. 自己做的roguelike+恶魔城游戏《魔塔猎人》已发布。

    游戏仍然是标准的roguelike,死亡后回到出生点重新开始,宏观架构上参考了<死亡细胞>,战斗设计上更加强调轻重攻击的组合,再配合236和28系列的搓招技.空中的突进飞腿.副武器等等. ...

  10. webpacke install vue application 报错 Failed at the phantomjs-prebuilt@2.1.14 install script

    刚刚在网上下了个开源的项目: https://github.com/ing670/webappkiller 执行npm install 报错:npm ERR! Failed at the phanto ...