一.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. js删除逗号

    var aaa="123,432,34.00 aaa.replace(/,/g, '');

  2. 《User Modeling with Neural Network for Review Rating Prediction》评论打分预测

    摘要: 传统的评分预测只考虑到了文本信息,没有考虑到用户的信息,因为同一个词 在不同的用户表达中是不一样的.同样good 一词, 有人觉得5分是good 有人觉得4分是good.但是传统的文本向量表达 ...

  3. cocos2dx-环境搭建和创建项目(mac用)

    学习一门语言最快的方法就是制作一个简单的项目. 而要制作一个项目必须先搭好环境,即使花上2小时去熟悉环境创建也不算浪费.由于之后的项目会用到cocos2d-x 3.0,这里以3.0为例子(不同的版本写 ...

  4. uva11419 二分图--最小覆盖=最大匹配

    大白书355 // UVa11419 SAM I AM // Rujia Liu #include <cstdio> #include <cstring> #include & ...

  5. MySQL从删库到跑路_高级(二)——自定义函数

    作者:天山老妖S 链接:http://blog.51cto.com/9291927 一.自定义函数简介 自定义函数(user-defined function UDF)是一种对MySQL扩展的途径,其 ...

  6. 解读 Q_D, Q_Q 指针

    见 qglog.h文件定义: #define Q_D(Class) Class##Private * const d = d_func()    #define Q_Q(Class) Class * ...

  7. Unity中的 原生插件/平台交互 原理

    http://blog.csdn.net/u010019717/article/details/78451660 声明:  内容摘录自:  http://gad.qq.com/article/deta ...

  8. PT100高精度测温电路 AD623+REF3030(转)

    源: PT100高精度测温电路 AD623+REF3030(很稳定)

  9. VC++ 删除一个文件目录下的所有文件以及目录

    BOOL DoRemoveDirectory(CString chrDirName); BOOL ReleaseDirectory(CString chrDirName) { BOOL bRemove ...

  10. Git 基础笔记整理1

    Git 官网:http://git-scm.com/ git教程1:http://www.yiibai.com/git/home.html git教程2 :http://www.liaoxuefeng ...