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,但是两者合在一起却少有人去研究,当时接 ...
随机推荐
- 编写一个简单的java服务器程序
import java.net.*;import java.io.*; public class server{ ); //监听在80端口 Socket sock = server.accept(); ...
- 【NLP】3000篇搜狐新闻语料数据预处理器的python实现
3000篇搜狐新闻语料数据预处理器的python实现 白宁超 2017年5月5日17:20:04 摘要: 关于自然语言处理模型训练亦或是数据挖掘.文本处理等等,均离不开数据清洗,数据预处理的工作.这里 ...
- Python学习之路-Day2-Python基础3
Python学习之路第三天 学习内容: 1.文件操作 2.字符转编码操作 3.函数介绍 4.递归 5.函数式编程 1.文件操作 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个 ...
- Oracle清除数据库中长时间占用资源的非活动的会话
1.启动资源计划 alter system set resource_limit=true scope=spfile; 2.设置非活动回话十五分钟断开,释放资源 alter profile defau ...
- Spring 日期时间处理
1 Spring自身的支持 1.1 factory-bean <bean id="dateFormat" class="java.text.SimpleDateFo ...
- 终端的CTRL+S 解说
在很多类Unix 的系统上,Ctrl-S 都有特殊的含义:它会"冻结"终端(它曾 经被用来暂停快速滚动).因为"保存"一般也是用这个快捷键,所以经常 会有人不假 ...
- ionic2 使用 cordova 打包成安卓apk
准备工作: 1.下载java sdk 配置好java 环境 2.下载android sdk 跟 android studio 并配置好环境 1.查看平台支持,添加android平台 首先命令提示符进入 ...
- 东正王增涛浅析OA信息化整合平台系统在企业中的应用价值
王增涛说OA信息化整合平台系统作为企业管理中最基础的管理软件,已在企业成长道路上存在多年,它的应用开启了智能移动办公的先河,也让企业的办公流程管理更加的便捷.高效.流畅.省时.省力,它的使用不但让企业 ...
- VR全景智慧城市:开启VR全景逛街新时代~
VR全景,又被称为3D实景,是一种新兴的富媒体技术,其与视频,声音,图片等传统的流媒体大的区别是"可操作,可交互". 对于顾客体验来说,VR确实是对于实体店是一种颠覆性的创新,它既 ...
- spring.handlers、spring.schemas、spring.tooling被覆盖的三种解决方式
在用到spring时,本地IDE里面跑的很正常,但是打jar包后在集群上运行时报错. 查找资料后确定了问题的根源,由于在依赖中调用了spring的许多包,每个包都有自己的spring.schemas文 ...