<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. 关于两数的最大公约数gcd

    深根半夜里研究C++的语法,在弄到关于函数的定义 这一部分时突然想写个试试,就拿比较熟悉的gcd来好了. 活这么久gcd一直是用辗转相除法(或者说欧几里得算法)得出的,根据<算法导论>第三 ...

  2. HDU 6017 Girls Love 233(多态继承DP)

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6017 [题目大意] 给出一个只包含2和3的串,你可以花费两个智力值交换相邻的两个字符 问在智力值不 ...

  3. 【贪心】【multiset】 Codeforces Round #401 (Div. 2) B. Game of Credit Cards

    对第一个人的排序,然后从小到大处理,对第一个人的每枚卡片,从第二个人的卡片中选择一个大于等于它的最小的,否则选择一个当前剩下的最小的,这样可以保证负场最少. 如果选择的改成大于它的最小的,就可以保证胜 ...

  4. 【动态规划】bzoj1633 [Usaco2007 Feb]The Cow Lexicon 牛的词典

    f[i]=min{f[i+1]+1,f[i+len[j]+cant]+cant}(for i=L-1 downto 0)(1<=j<=w) #include<cstdio> # ...

  5. 【权值分块】bzoj3224 Tyvj 1728 普通平衡树

    权值分块和权值线段树的思想一致,离散化之后可以代替平衡树的部分功能. 部分操作的时间复杂度: 插入 删除 全局排名 全局K大 前驱 后继 全局最值 按值域删除元素 O(1) O(1) O(sqrt(n ...

  6. 快速创建Django验证码

    # 生成随机验证码图片 import stringfrom random import randint, samplefrom PIL import Image, ImageDraw, ImageFo ...

  7. java调用windows的wmi获取设备性能数据

    java调用windows的wmi获取监控数据(100%纯java调用windows的wmi获取监控数据) 转:http://my.oschina.net/noahxiao/blog/73163 纯j ...

  8. [美团 CodeM 初赛 Round A]最长树链

    题目大意: 给你一棵带点权的树,找出一个最长的树链满足链上点权的最大公因数不为1. 思路: 暴力DP. 对于每个点,记录一下以这个点为一个端点的所有链的最大公因数及长度. 然后暴力转移一下,时间复杂度 ...

  9. openresty的时间获取

    ngx.say('ngx.time()' .. ngx.time()) ngx.say('ngx.now()' .. ngx.now()) ngx.say('ngx.today()' .. ngx.t ...

  10. 13南理工test01:进制转化

    #include<iostream> #include<cstdlib> using namespace std; int main() { //cout<<5/2 ...