ionic复选框应用

如图:在项目中我需要实现这个效果布局和功能(进入页面默认全选,点击之后可以不选择)
HTML代码:
<div class="row" ng-repeat="engineer in engineerList" style="border-bottom: 1px solid #D6D6D6">
<div class="col col-10 text-center">
<label class="checkbox" style="padding-top: 23px;padding-left: 0">
<input type="checkbox"
ng-model="engineer.checked">
</label>
</div>
<div class="col col-100 text-left" style="border: 0">
<div class="list" style="padding-right: 0">
<div class="item item-avatar photo-engineer-list item-button-right"
style="border: 0;padding-left: 80px">
<img class="photo-engineer" style="height: 200px;width: 200px"
ng-src="{{engineer.PhotoUrl}}"> <div>
<h2>{{engineer.Name}}</h2> <p>{{engineer.Telephone}}</p>
</div>
<a class="button icon icon-phone"
href="tel:{{engineer.Telephone}}" style="color: #007aff;background: #ffffff"></a>
</div>
</div>
</div>
</div>
.photo-engineer-list > img:first-child, .photo-engineer-list .item-image, .photo-engineer-list .item-content > img:first-child, .photo-engineer-list .item-content .item-image, .item-avatar-left > img:first-child, .item-avatar-left .item-image, .item-avatar-left .item-content > img:first-child, .item-avatar-left .item-content .item-image {
position: absolute;
top: 10px;
left: 0px;
max-width: 50px;
max-height: 50px;
width: 100%;
height: 100%;
border-radius: 50%;
}
js代码
js里获得相应的数据,HTML模板里面用ng-repeat就可以了
ionic复选框应用的更多相关文章
- Ionic Js四:复选框
ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用. <ion-checkbox ng-model= ...
- ionic-CSS:ionic checkbox(复选框)
ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...
- 对jquery操作复选框
摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...
- MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件
类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- 复选框css
input, select, button, textarea{ -webkit-appearance:none; }该属性会导致复选框失去选择效果
- 案例1.通过Jquery来处理复选框
实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 ...
- 【Telerik】实现列表单元格中添加复选框,进行状态(是、否)判断
前台界面: 需求:实现对每条细则是否必备进行判断,必备就勾选,否则不勾选. 首先:要保证列表GridView是可编辑的(IsReadOnly=false) 表格代码 其次:单元格的数据绑定要保证是双向 ...
- 如何在select下拉列表中添加复选框?
近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...
随机推荐
- Mysql,zip格式安装、修改密码、建库
Mysql,zip格式 1. Mysql 主目录最好别带有"- ."之类的字符 2. Mysql 配置环境变量 Path 环境变量后加上 mysql解压路径:eg:E:\mysql ...
- Win10或Win8下ObjectARX2015 Wizard向导创建项目失败解决方法
[原创]objectARX 2015 Wizard安装向导在Win8/win10下无法创建项目的解决方法总结by edata @2017-5-1objectARX 2015 Wizard安装向导在Wi ...
- Ninja 之路:试炼!求生演习——异步 I/O、http
鸣人火影之路的第一步,就是跟着卡卡西学习基本的忍术,让自己先在忍者的世界里生存下来,so,想要在 node 的世界里游刃有余,必须要掌握异步 I/O.http等核心技能. ok,第一步先学会读懂需求 ...
- hdu2717Catch That Cow 简单BFS
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2717 刚开始思路错了,用的DP,一直WA,后来才发现是搜索,还是简单的BFS,顿时.... 思路: B ...
- 关于java和c++中的i++
看到一个题目,大概是i=i++之类. 乍一看很简单,都知道i++的先参与计算再自增, 所以i不变. 但是仔细一想, 如果i不变, 那么在赋值之后, 自增的i, 增加的是谁呢? 逻辑顺序是怎样的呢? / ...
- MFC六大关键技术
视频教程地址观看:http://pan.baidu.com/s/1mhKQ6kK 1.MFC六大关键技术sada)MFC程序的初始化过程:从CWinApp类派生一个应用程序类:使用派生类定义的全局变量 ...
- 【方法】Html5实现文件异步上传
1 简介 开发文件上传功能从来不是一件愉快的事,异步上传更是如此,使用过iframe和Flash的上传方案,也都感觉十分的别扭.本文简要简绍利用Html5的FormData实现文件的异步上传,还可以实 ...
- Python爬虫一:爬取上交所上市公司信息
前几天领导让写一个从新闻语料中识别上市公司的方案.上市公司属于组织机构的范畴,组织机构识别属于命名实体识别的范畴.命名实体识别包括人名.地名.组织机构等信息的识别. 要想从新闻语料中识别上市公司就需要 ...
- Hibernate笔记一:HIbernate配置-HelloWorld
hibernate介绍: Hibernate是一个开源的对象关系映射框架,它对JDBC进行了轻量级的对象封装,使Java程序员可以随心所欲的使用对象编程思维来操纵数据库. 它不仅提供了从java类到数 ...
- Jetty + HttpClient 处理http请求
本人最近通过自己动手处理http请求,对http协议.Jetty以及HttpClient有了更深刻的理解,特在此与大家分享. 此图是http协议的请求格式.根据请求方法,有get和post之分.get ...