标签:
如图:在项目中我需要实现这个效果布局和功能(进入页面默认全选,点击之后可以不选择)
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就可以了
标签:
原文地址:http://www.cnblogs.com/xiaojun-zxj/p/5120479.html