www-huanghe/modules/common/views/filterPagetl.html

<ion-modal-view style="background-color:rgba(0,0,0,0.5)" title="{{labelTitle}} 相关资源"
                class="modal-content half-modal">
  <div class="bar bar-header bar-header-blue">
    <div class="button button-icon icon pus_blue"></div>
    <!--<button class="button button-icon  icon goback whiteGoBack noneContent"  ng-click="goback()"></button>-->
    <h1 class="bar_title" style="color: #fff">资源筛选条件</h1>
    <div class="button button-icon icon top-button-close" ng-click="filtertlPageModaltl.hide()">
      <i class="icon ion-android-close"></i>
    </div>
  </div>
  <ion-content class="has-header" scroll="true" delegate-handle="privateContent"
               style="padding-top:10px;background-color: #fff">
<!--    <div>-->
<!--      <div ng-repeat="list in filterList" ng-init="outerIndex=$index" class="filterlist-box">-->
<!--        <div class="filterlist-title">{{list.title}}</div>-->
<!--        <ul style="margin:10px 0;">-->
<!--          <li ng-repeat="item in list.items track by $index"-->
<!--              ng-class="{'list-item':true,'selected-item':item.selected}"-->
<!--              ng-click="changSelected(item,outerIndex,$index)">{{item.labelName}}-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->

<!--      <div class="filterlist-box">-->
<!--        <div class="filterlist-title">{{sortList.title}}</div>-->
<!--        <ul class="filter-items">-->
<!--          <li ng-repeat="list in sortList.items track by $index"-->
<!--              ng-class="{'list-item':true,'selected-item':list.selected}" ng-click="selectBySort($index)">-->
<!--            {{list.labelName}}-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
    <div ng-repeat="item in selectindex.items track by $index"
    ng-if="selectif<=1">
      <ion-toggle
                  style="width: 200px;border: none;display: flex;justify-content: center"
                  ng-model="item.selected"  >
        <span >{{item.selected?"是":"否"}}</span>
      </ion-toggle>
    </div>
      <ul class="filter-items" ng-if="selectif>1&&selectif<5">
        <li ng-repeat="item in selectindex.items track by $index"
            ng-class="{'list-item':true,'selected-item':item.selected}"
            ng-click="selectByLabeltl(item, outerIndex,$index)">{{item.labelName}}
        </li>
      </ul>
    <div ng-repeat="item in MoreData" ng-if="selectif==5" style="font-size: 0.3rem;margin: 20px;display: flex;align-items: center;" >
      <span>{{item.info}}：</span>
      <ion-toggle ng-if="item.choicetype=='whether'"
                  style="width: 200px;border: none;display: flex;justify-content: center"
                  ng-model="item.ifshow"  ng-checked="item.ifshow">
        <span >{{item.ifshow?"是":"否"}}</span>
      </ion-toggle>
      <div ng-if="item.choicetype=='dropdown'" ng-click="optclcick(item)"  >
        <div ng-repeat="optitem in item.items" style="margin: 6px" >
          <input type="checkbox"  ng-model="optitem.content1" >
           {{optitem.info}}
        </div>
      </div>
      <select
        ng-model="item.content3"
        ng-if="item.choicetype=='dropdown/number'||item.choicetype=='number1'"
        ng-change="handletypes(item.content3,$index)"
        ng-options="x for x in Datedata"
        style="height: 43px;margin: 10px;border: none;font-size: 16px">
      </select>
      <input ng-model="item.content1" style="border: 1px #dcdcdc solid;display: inline-block;height: 35px;border-radius: 5px;" ng-if="item.choicetype=='text'" type="text">
      <span ng-if="item.choicetype=='number1'||item.choicetype=='dropdown/number'" style="margin: 0 5px">年</span>
      <input ng-model="item.content1" style="border: 1px #dcdcdc solid;display: inline-block;height: 35px;width: 60px;border-radius: 5px;text-align: center" ng-if="item.choicetype=='number2'||item.choicetype=='dropdown/number'" type="text">
      <span ng-if="item.choicetype=='number2'||item.choicetype=='dropdown/number'" style="margin: 0 5px">—</span>
      <input ng-model="item.content2" style="border: 1px #dcdcdc solid;display: inline-block;height: 35px;width: 60px;border-radius: 5px;text-align: center" class="moreinput" ng-if="item.choicetype=='number2'||item.choicetype=='dropdown/number'" type="text">
      <span ng-if="item.choicetype=='dropdown/number'&&item.propertytoes!='feidiarea'" style="margin: 0 5px">万</span>
      <span ng-if="item.choicetype=='number2'&&item.propertytoes!='feidiarea'" style="margin: 0 5px">个</span>
      <span ng-if="item.propertytoes=='feidiarea'" style="margin: 0 5px">平方</span>
    </div>
    </div>
    <br><br><br><br><br><br><br><br><br><br>
  </ion-content>
  <div class="submit-box" style="background-color: #fff">
    <button ng-click="resetSelectedtl()" class="button button-assertive filter-submit-button">重置</button>
    <button ng-click="submitSelected()" class="button button-positive filter-submit-button"
            style="background-color:#3B8BD0;">确认
    </button>
  </div>
</ion-modal-view>
<style>
  .top-button-close {
    color: #fff;
  }
  input[type="checkbox"]{
    -webkit-appearance: none;
    vertical-align:middle;
    margin-top:0;
    background:#fff;
    border:#999 solid 1px;
    border-radius: 50%;
    min-height: 25px;
    min-width: 25px;
  }
  input[type="checkbox"]:checked {
    background: #3190e8;
    position: relative;
  }
  input[type='checkbox']:checked::after{
    content: '';
    top: 4px;
    left: 4px;
    position: absolute;
    background: transparent;
    border: #fff solid 2px;
    border-top: none;
    border-right: none;
    height: 10px;
    width: 15px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .half-modal{
  background-color:rgba(0,0,0,0.5)
  }
  @media screen and (min-width: 900px) {
    .modal-backdrop, .modal-backdrop-bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 20.5rem;
    }
  }
</style>