angular4 radio checkbox 有用
<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 有用的更多相关文章
- :radio :checkbox
匹配所有单选按钮 示例 描述: 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input typ ...
- jSP的3种方式实现radio ,checkBox,select的默认选择值。
jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...
- 检查radio/checkbox是否至少选择一项
//---------------------------------------------------------- // 功能:检查radio/checkbox是否至少选择一项 // 参数: / ...
- 微信小程序 - radio/checkbox自定义组件
更新 2019-01-26:首次发布 2019-01-27:增加默认取值选中radio/checkbox,checkbox需在onload取值 2019-01-28:增加radio取值不存在红色提示和 ...
- 【TP3.2+onethink】radio+checkbox+select 空间 编辑页面选中,附录 js 返回上一页
1.TP3.2框架 如何实现 [radio+checkbox+select 空间 编辑页面选中],说实话,比较繁琐,不咋地!! 不废话,上代码:(其中 XX_arr 变量一维数组) <div ...
- jQuery radio|checkbox的取值与赋值
文章简单即是美[我说的是技术博客] |--radio |--checkbox 参考: http://blog.csdn.net/gd2008/article/details/6951208 h ...
- 自定义radio/checkbox样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
- jquery 判断多组radio checkbox是否选中
最近要做一个问卷调查的小页面,需要判断用户是否每项都有选择,如果每个都挨个判断很苦逼,所以网上搜了搜,自己也总结了一下,写了一段小代码~哈哈,水平有限大家见谅.html代码就不上了,N多单选和多选框就 ...
随机推荐
- 21、Flask实战第21天:常用的Flask钩子函数
在Flask中钩子函数是使用特定的装饰器装饰的函数.为什么叫钩子函数呢?是因为钩子函数可以在正常执行的代码中,插入一段自己想要执行的代码.那么这种函数就叫做钩子函数. before_first_req ...
- [NOI2018]屠龙勇士(exCRT)
首先很明显剑的选择是唯一的,直接用multiset即可. 接下来可以发现每条龙都是一个模线性方程.设攻击第i条龙的剑的攻击力为$s_i$,则$s_ix\equiv a_i\ (mod\ p_i)$. ...
- Spark小问题合集
1)在win7下使用spark shell运行spark程序,通过以下形式读取文件时 sc.sequenceFile[Int,String]("./sparkF") 偶尔会出现“I ...
- MyBasic架构
MyBasic架构图 2,架构图解析 (1) (2) (3)
- Android 架构 3.实现
以实现最小化可用产品(MVP)的目标,用最简单的方式来搭建架构和实现代码.IDE采用Android Studio,Demo实现的功能为用户注册.登录和展示一个券列表,数据采用我们现有项目的测试数据,接 ...
- Android Studio 下载地址 & SDK 更新教程
Android Studio 下载地址: http://www.android-studio.org/ SDK 更新教程: http://www.androiddevtools.cn/ SDK 推荐使 ...
- Shiro 设置session超时时间
通过api:Shiro的Session接口有一个setTimeout()方法 //登录后,可以用如下方式取得session SecurityUtils.getSubject().getSession( ...
- easyui datagrid checkbox的相关属性整理
DataGrid其中与选择,勾选相关 DataGrid属性: singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行 ...
- Lucene的学习及使用实验
实验一下Lucene是怎么使用的. 参考:http://www.importnew.com/12715.html (例子比较简单) http://www.yiibai.com/lucene/lucen ...
- Spark(四) -- Spark工作机制
一.应用执行机制 一个应用的生命周期即,用户提交自定义的作业之后,Spark框架进行处理的一系列过程. 在这个过程中,不同的时间段里,应用会被拆分为不同的形态来执行. 1.应用执行过程中的基本组件和形 ...