<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. 浅析module.exports和exports区别和使用

    module.exports和exports 写node的时候,特别是自定义模块的时候,都是一顿乱敲,然后module.exports={}完事. 但有时候去看别人写的代码的时候会发现还可以expor ...

  2. luogu P3919 【模板】可持久化数组(可持久化线段树/平衡树)

    As you see // luogu-judger-enable-o2 #include<cstdio> #include<cstring> #include<algo ...

  3. [BZOJ 3170] 松鼠聚会

    Link: BZOJ 3170 传送门 Solution: $Knowledge Point:$ 切比雪夫距离$DIST(a,b)=max\{ |X'_a-X'_b|,|Y'_a-Y'_b|\}$ 曼 ...

  4. 【2-SAT】Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) D. Innokenty and a Football League

    先反复地扫(不超过n次),把所有可以确定唯一取法的给确定下来. 然后对于剩下的不能确定的,跑2-SAT.输出可行解时,对于a和¬a,如果a所在的强连通分量序号在¬a之前,则取a,否则不取a.如果a和¬ ...

  5. 【块状树】【博弈论】bzoj3729 Gty的游戏

    块状树,每个块的根记录一下当前块内距块根为奇数距离的异或和和偶数距离的异或和,询问的时候讨论一下即可. 总的节点数可能超过50000. #include<cstdio> #include& ...

  6. URL Schemes(转载)

    URL Schemes 应用在 iOS 上已经很久了.对于使用者来说,在沙盒机制下的 iOS 中,如果想做到一定程度上的自动化就不可避免地要用到 URL Schemes.但因为 URL Schemes ...

  7. [读书笔记] 你早该这么玩Excel

    <你早该这么玩Excel>只教你做两件事:如何设计一张“天下第一表”,你会恍然大悟,以前遇到的种种麻烦是因为做错了表格:如何一分钟“变”出N张表,你会明白表格是“变”出来的,不是“做”出来 ...

  8. Linux 命令缩写部分解释

    转:http://blog.chinaunix.net/uid-28408358-id-3890783.html bin = BINaries  /dev = DEVices  /etc = ETCe ...

  9. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  10. spring融合activitymq-all启动报错的解决办法

    报错信息: nested exception is java.lang.NoSuchMethodError: org.springframework.core.annotation.Annotated ...