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就可以了

  • 相关阅读:
    hdu 1443 Joseph 约瑟夫环
    hdu 1568 Fibonacci 对数。。
    UILineBreakMode
    Android RelativeLayout 动态添加组件
    iOS 让view触发点击事件
    读取plist文件数据
    [转]Android获取SD卡视频音频文件
    ubuntu下vim修复
    DMO(DirectX Media Object)的工程创建过程及其调用方式
    《Windows程序设计》笔记 —— Chapter One
  • 原文地址:https://www.cnblogs.com/xiaojun-zxj/p/5120479.html
Copyright © 2011-2022 走看看