<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. 训练指南 UVALive - 3989(稳定婚姻问题)

    ayout: post title: 训练指南 UVALive - 3989(稳定婚姻问题) author: "luowentaoaa" catalog: true mathjax ...

  2. hdu6127

    hdu6127 题意 二维平面上存在一些点,每个点都有权值,任意两点组成的线段的权值为这两点权值的乘积,选定一条经过原点的直线,问怎样使得它经过的线段的权值之和最大. 分析 题目等价于用一条直线将平面 ...

  3. 「PKUWC 2018」随机算法 (第二版,正解做法)

    上一版貌似是打了 O(3 ^ N) 暴力和 一条链的情况,得了60分.... 第一次做的时候光想练一练暴力...就没去想正解,谁知道正解比暴力好写不知道多少,mmp 设 f(S) 为 选集合S中的点可 ...

  4. [LOJ6436]神仙的游戏

    感觉border的性质还是挺神奇的 一个border的性质是$S$有长度为$len$的border当且仅当对$\forall i\equiv j\left(\bmod(n-len)\right)$有$ ...

  5. 【floyd】CODEVS 1077 多源最短路

    floyd模板 #include<cstdio> #include<algorithm> using namespace std; ][],m,x,y,n; int main( ...

  6. 【拓扑排序】【堆】CH Round #57 - Story of the OI Class 查错

    拓扑排序,要让字典序最小,所以把栈改成堆. #include<cstdio> #include<queue> #include<algorithm> using n ...

  7. BUG The user specified as a definer ('root'@'%') does not exist' in

    BUG描述:通过点击实现页面无刷新提交数据. 链接服务器数据库时-提交成功 当把数据库下载到本地后链接,提交失败 查看日志显示:The user specified as a definer ('ro ...

  8. jdk8新特性

    JDK8新特性(JDK8的新特性) * 接口中可以定义有方法体的方法,如果是非静态,必须用default修饰 * 如果是静态的就不用了 class Test { public void run() { ...

  9. NSNotificationCenter监听TextField文字变化

    注册 1: NSNotificationCenter.defaultCenter().addObserver(self, selector: "textDidChange", na ...

  10. ionic 打包成apk后,所有网络请求404

    无论怎么改 config.xml <allow-navigation href="http://*/*" /> <allow-intent href=" ...