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,但是两者合在一起却少有人去研究,当时接 ...
随机推荐
- Git下载、更新、提交使用总结
Git使用总结 1.下载代码到本地 1.1指定存储文件路径 1.运行git-bash.exe 2.指定盘符:cd f:work 1.2下载代码 命令:$ git clone <版本库的网址> ...
- Docker - 访问仓库
仓库与注册服务器 仓库(Repository)集中存放镜像的项目或目录. 注册服务器(Registry)管理仓库的服务器,服务器上可以有多个仓库,每个仓库有多个镜像. 例如:在仓库地址docker.i ...
- vlan内部与外部某终端之间的通信
实现虚拟局域网外部终端与内部终端之间的通信,即实现pc3与pc1和pc4之间的通信. 把交换机上的默认VLAN1改成VLAN2(红色字体命令). 各vlan内部终端的通信,是通过vlan ID来实现的 ...
- poj2481 Cows 树状数组
题目链接:http://poj.org/problem?id=2481 解题思路: 这道题对每组数据进行查询,是树状数组的应用.对于二维的树状数组, 首先想到排序.现在对输入的数据按右值从大到小排序, ...
- POJ1850-Code 递推数学
题目链接:http://poj.org/problem?id=1850 题目大意: 按照字典序对升序排列组成的字母进行编号,给出一个长度不超过10的串,求出它的编号是多少?如果无法进行编号则输出0. ...
- Java学习笔记——浅谈数据结构与Java集合框架(第一篇、List)
横看成岭侧成峰,远近高低各不同.不识庐山真面目,只缘身在此山中. --苏轼 这一块儿学的是云里雾里,咱们先从简单的入手.逐渐的拨开迷雾见太阳.本次先做List集合的三个实现类的学习笔记 List特点: ...
- iOS之copy、strong使用,block特性
身边一同事,我印象在过去三个月,有两次因为使用“copy”修饰UIKit控件的属性,导致程序崩溃.他还一本正经的说我以前一直使用copy. 好了,到这里我们就不得不说说什么时候使用copy.我的印象中 ...
- springcloud(二):注册中心Eureka
Eureka是Netflix开源的一款提供服务注册和发现的产品,它提供了完整的Service Registry和Service Discovery实现.也是springcloud体系中最重要最核心的组 ...
- 关于Dubbo一个接口多个实现的解决方案
如题,其实这个问题在官方文档中已经说明了.我直接贴图就好了 更多学习请参考:minglisoft.cn/technology
- Linux学习第三步(Centos7安装mysql5.7数据库)
版本:mysql-5.7.16-1.el7.x86_64.rpm-bundle.tar 前言:在linux下安装mysql不如windows下面那么简单,但是也不是很难.本文向大家讲解了如何在Cent ...