angular5 表单元素 checkbox radio 组讲解
一.checkedbox
1.ngModel绑定方式
<input [(ngModel)]="item.checked"
value="item.checked"
name="facilityList{{i+1}}"
(click)="selectThisFacility(item)"
class="week-checkbox"
type="checkbox"
data-code="item.code">
此时点击checkbox,checkbox的checked属性会随之改变,因为ngModel绑定的就是他的checked属性值此时的[(ngModel)]相当于[(checked)] 2 使用checked属性
<input [checked]="item.checked"
name="serviceCheckList{{i+1}}"
(click)="selectThisService(item)"
class="week-checkbox"
type="checkbox"
data-code="item.code">
此时点击checkbox[checked]只会改变,但是item.checked不会变 [checked]是单项绑定不会改变item.checked 注意angular5表单元素需要有name且不能相同必须唯一 ,要么添加上ngModelOption={standalone:true}; 二:radio
最好使用以下方法
<input name='mapZoomLevel' type="radio"
[checked]="item.code==tempzoomLevel"
(click)="zoomChange(item)">{{item.name}}
angular5 表单元素 checkbox radio 组讲解的更多相关文章
- 文字和表单(checkbox/radio)元素垂直对齐方法,兼容Firefox和IE。
这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何 ...
- 表单元素——checkbox样式美化
一.背景 设计狮童鞋总是会设计各种高大上的效果图,比如下面这个土豪金的效果. 该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框,打钩时是一个金色的对勾.接下来说说怎样实现该效果. 二.解 ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jquery attr处理checkbox / select 等表单元素时的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- jquery attr处理checkbox / select 等表单元素时只能使用一次的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- abp radio表单元素 消失了
框架将原本的元素都隐藏掉了,取而代之的是根据label定义了自己的样式,如下: [type="radio"]:not(:checked)+label { padding-le ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
随机推荐
- XDU1024简单逆序对(贪心||分治)
题目描述 逆序对问题对于大家来说已经是非常熟悉的问题了,就是求i<j时,a[i] > a[j]的组数.现在请你求出一串数字中的逆序对的个数,需要注意的是,这些数字均在[0,9]之内. 输入 ...
- linux中的查找命令
which命令:使用which命令可以看到某个系统命令是否存在,以及执行的到底是哪一个位置上的命令.在PATH指定的路径中进行搜索, 返回第一个搜索结果. which grep /bin/grep ...
- 187. Repeated DNA Sequences(建立词典,遍历一遍 o(n))
All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...
- 174. Dungeon Game(动态规划)
The demons had captured the princess (P) and imprisoned her in the bottom-right corner of a dungeon. ...
- Python: collections.nametuple()--映射名称到序列元素
问题: 通过下标访问列表或者元组中元素 answer: collections.namedtuple()通过使用元组对象来解决这个问题 这个函数实际上是一个返回Python中标准元组类型子类的一个工 ...
- APP获取证书签名指纹
Android: public static String getSignatureSHA1(Context context) { String sign = null; try { // 通过包管理 ...
- thinkphp标签实现bootsrtap轮播carousel实例
thinkphp标签实现bootsrtap轮播carousel实例由于轮播carousel第一个div需要设置active样式才能正常显示,上面的圆点也同样需要数字,使用volist标签在循环的同时可 ...
- selinux配置错误实例介绍
错误原因 配置关闭SELinux,结果误操作 应修改配置文件/etc/selinux/config中的“SELINUX”参数的值, # SELINUX=enforcing 原始配置 SELINUX= ...
- P3456 [POI2007]GRZ-Ridges and Valleys(bfs)
P3456 [POI2007]GRZ-Ridges and Valleys 八个方向都跑一遍bfs,顺便判断一下是山峰还是山谷,或者是山坡(俩都不是) (实在不知道要说啥了qwq) #include& ...
- java安全体系之JCA、JCE、JAAS、JSSE及其关系
首先.如果是运行在internet上的系统,并且如果是个涉及到利益性的系统,不可避免的会遭受各种攻击(我们公司的很多系统从OS到DB到webapp就实时有收到攻击和破解),所以尽可能保证安全性将不再是 ...