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>

CSS

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