一.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 组讲解的更多相关文章

  1. 文字和表单(checkbox/radio)元素垂直对齐方法,兼容Firefox和IE。

    这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何 ...

  2. 表单元素——checkbox样式美化

    一.背景 设计狮童鞋总是会设计各种高大上的效果图,比如下面这个土豪金的效果. 该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框,打钩时是一个金色的对勾.接下来说说怎样实现该效果. 二.解 ...

  3. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. jquery attr处理checkbox / select 等表单元素时的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  5. jquery attr处理checkbox / select 等表单元素时只能使用一次的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  6. abp radio表单元素 消失了

    框架将原本的元素都隐藏掉了,取而代之的是根据label定义了自己的样式,如下: [type="radio"]:not(:checked)+label {    padding-le ...

  7. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  8. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  9. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

随机推荐

  1. EBS 多组织访问设置

    如果想让你的职责下为单组织模式,那么你在Profile下只设置MO: Operating Unit的值,MO: Operating Unit提供只访问一个单独的OU.如果你想让你的职责下为多组织模式, ...

  2. python ( EOL while scanning string literal)

    python错误: EOL while scanning string literal: 这个异常造成的原因是字符串,引号没有成对出现 参考:http://www.jb51.net/article/6 ...

  3. codeforces 461C

    这题说的是 给了一张长方形的纸 1*n 然后可以按照不同的做法去折这个纸张 他有两种操作,操作1 给了一个pi 点 然后将左边的纸往右边折,第2种操作是给了一个L 和 R 然后计算出 L和R 之间的纸 ...

  4. html文件上传控件file自定义样式

    问题: HTML自带的file上传按钮因在各种浏览器里显示样式不一.不易自定义样式给我们带来很大的麻烦. 解决思路: 将input[type=file]控件隐藏,使用一个input[type=text ...

  5. foxmail收取163企业邮箱设置,不能直接用foxmail默认的配置,否则一直提示帐号密码错误

    foxmail收取163企业邮箱设置,不能直接用foxmail默认的配置,否则一直提示帐号密码错误,收件.发件服务器配置需要用imap.ym.163.com,smtp.ym.163.com三级域名,帐 ...

  6. 一起来全面解析5G网络领域最关键的十大技术

    提到5G,很多人的第一印象就是它的网络速度快.延时性低.带宽大,没错,这就是5G时代的特点!5G作为第五代移动通信网络,其峰值理论传输速度可达每秒数十Gb,这比4G网络的传输速度快数百倍,整部超高画质 ...

  7. Linux vmstat命令实际操作介绍

    vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.它能够对系统的整体情况进行统计,无法对某个进程进行深入分析. ...

  8. web前端----JavaScript的DOM(二)

    前面在DOM一中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele_p ...

  9. .NET,ASP.NET,ASP.NET MVC 之间的区别

    https://www.cnblogs.com/wwym/p/5555772.html

  10. mysql多实例安装与ssl认证

    mysql多实例安装有两种形式: 同一数据库版本的多实例安装. 不同数据库版本的多实例安装. 同一数据库的多实例安装: 在同一台机器上安装4台mysql数据库实例. 从官网下载MySQL5.6版本的二 ...