如图:在项目中我需要实现这个效果布局和功能(进入页面默认全选,点击之后可以不选择)

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复选框应用的更多相关文章

  1. Ionic Js四:复选框

    ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用. <ion-checkbox ng-model= ...

  2. ionic-CSS:ionic checkbox(复选框)

    ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...

  3. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  4. MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  5. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  6. 复选框css

    input, select, button, textarea{ -webkit-appearance:none; }该属性会导致复选框失去选择效果

  7. 案例1.通过Jquery来处理复选框

    实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 ...

  8. 【Telerik】实现列表单元格中添加复选框,进行状态(是、否)判断

    前台界面: 需求:实现对每条细则是否必备进行判断,必备就勾选,否则不勾选. 首先:要保证列表GridView是可编辑的(IsReadOnly=false) 表格代码 其次:单元格的数据绑定要保证是双向 ...

  9. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

随机推荐

  1. 《JavaScript面向对象编程指南(第2版)》读书笔记(二)

    <JavaScript面向对象编程指南(第2版)>读书笔记(一) <JavaScript面向对象编程指南(第2版)>读书笔记(二) 目录 一.基本类型 1.1 字符串 1.2 ...

  2. 计算机的启动和Linux的启动

    计算机的启动和Linux的启动 一 计算机的启动   计算机的启动过程分为四个阶段,分别是:BIOS.MBR.启动管理程序.加载操作系统内核.操作系统启动.   1.1 BIOS 计算机加电后,第一件 ...

  3. <图论入门>邻接矩阵+邻接表

    非本人允许请勿转载. 趁热打铁,学会了邻接表把这个总结一下,以及感谢大佬uncle-lu!!!(奶一波)祝早日进队! 首先,图论入门就得是非常基础的东西,先考虑怎么把这个图读进去. 给定一个无向图,如 ...

  4. 【2017-05-17】WebForm

    ASP.NET分为:ASP.NET WebForm和ASP.NET MVC 运行机制:C/S(客户端应用程序)代码在客户端执行,仅仅去服务器上的数据库存取数据 B/S(网站应用程序)程序代码在服务器上 ...

  5. StringTokenizer使用笔记

    StringTokenizer 基本使用 笔者最近在做算数表达式的逆波兰式转换和解析,原始表达式为String类型,在使用StringTokenizer 之前笔者的解决思路是 将原始表达式->转 ...

  6. 用kotlin方式打开《第一行代码:Android》

    参考:<第一行代码:Android>第2版--郭霖 注1:本文为原创,例子可参考郭前辈著作:<第一行代码:Android> 注2:本文不赘述android开发的基本理论,不介绍 ...

  7. 15、TCP/IP协议

    15.TCP/IP协议       几台孤立计算机系统组在一起形成网络,几个孤立网络连在一起形成一个网络的网络,即互连网.一个互连网就是一组通过相同协议族互连在一起的网络. 互联网的目的之一是在应用程 ...

  8. 初码-Azure系列-迁移PHP应用至Azure的一些实践记录和思考

    最近客户在逐步迁移应用从阿里云到Azure,这次又轮到一个PHP+MySQL应用了,顺便也记一下流水账. 需求:迁移部署在阿里云上的ECS服务器(系列2,IO优化+2核4G+50G的SSD云盘+10M ...

  9. (one) 条件判断的总结

    第一:if语句的一般形式: if(expression)   statement1; statement2; 对于条件判断,我觉得要点在于“条件”(expression),它是一个结果为false或t ...

  10. Include promo/activity effect into the prediction (extended ARIMA model with R)

    I want to consider an approach of forecasting I really like and frequently use. It allows to include ...