zoukankan      html  css  js  c++  java
  • 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; 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就可以了

  • 相关阅读:
    第十三章 类继承
    第十一章 使用类
    第十章 对象和类
    第九章 内存模型和名称空间
    第八章 函数幽探
    史上最详细得虚拟机安装过程,傻瓜式操作
    JVM内存结构图表展示
    主流消息队列rocketMq,rabbitMq比对使用
    springboot+druid+mybatis plus的多数据源配置
    linux服务器开放防火墙和端口,以及查询状态
  • 原文地址:https://www.cnblogs.com/xiaojun-zxj/p/5120479.html
Copyright © 2011-2022 走看看