app-multi-select.html 4.35 KB
Newer Older
chase's avatar
chase committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<div>
    <!--因为less打包后无法成功加载到项目,为了开发进度,只能写在html中-->
    <style>
        .for-fake-input{
            width: 100%;
            margin: 0;
            height: inherit;
            border: 0;
            outline: none;
            font-size: inherit;
            padding: 0;
        }

        .select-simulator{
            height: inherit;
            border:0;
            width: 100%;
            font-size: inherit;
            border-radius: 3px;
            background-color: #fff;
            background-image: none;
            position: relative;
            overflow: hidden;
        }

        .select-simulator-option-menu{
            border: 1px solid #dadada;
            position: absolute;
            max-height: 15rem;
            overflow: auto;
            z-index: 11;
            left: 0;
            top: 0;
            width: 0;
            background-color: white;
            font-size: 1rem;
            border-radius: 5px;
            box-shadow: 0 2px 2px rgba(210,210,210,0.7);
            border-top: 1px solid #dedede;
            border-bottom: 1px solid #b7b7b7;
        }
        .select-simulator-option-menu ul{
            padding:0;
        }
        .select-simulator-option-menu ul li{
            padding:0 8px;
            list-style: none;
chase's avatar
chase committed
48 49 50
            color: #000;
            font-size: 13px;
            line-height: 1;
chase's avatar
chase committed
51 52 53 54 55
        }
        .select-simulator-option-menu ul li:hover{
            background-color: #e7e8e0;
        }
        .select-simulator-option-menu ul li:nth-child(odd){
chase's avatar
chase committed
56
            background-color: #F2F2F2;;
chase's avatar
chase committed
57 58 59
        }
        .select-simulator-option-menu ul li > label{
            margin:0;
chase's avatar
chase committed
60
            padding: 8px 0;
chase's avatar
chase committed
61 62 63 64 65 66 67 68 69 70 71 72 73
        }

        .input-reset-button {
            position: absolute;
            margin: 0;
            border: 0;
            background: #fff;
            top: 0;
            right: 0;
            color: #969696;
            overflow: hidden;
            outline: none;
        }
chase's avatar
chase committed
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
        .input-arrow-drop-button {
            position: absolute;
            margin: 0;
            border: 0;
            background: #fff;
            top: 0;
            right: 0;
            color: #969696;
            overflow: hidden;
            outline: none;
        }
        .input-arrow-drop-button:before {
            content: "▾";
            height: inherit;
            width: inherit;
            position: relative;
            background: inherit;
        }
        .input-reset-button:after {
chase's avatar
chase committed
93 94 95 96
            content: "x";
            height: inherit;
            width: inherit;
            position: relative;
chase's avatar
chase committed
97
            background: inherit;
chase's avatar
chase committed
98
        }
chase's avatar
chase committed
99 100 101 102 103 104 105
        .select-simulator-option-name{
            float:left;
        }
        .select-simulator-option-check-icon{
            float:right;
            color:#0db4ff;
        }
chase's avatar
chase committed
106 107 108 109 110
    </style>
    <div class="select-simulator">
        <input class="for-fake-input"
               ng-click="showMenu();"
               placeholder="请选择"
chase's avatar
chase committed
111
               title="{{selected}}"
chase's avatar
chase committed
112 113
               readonly
               ng-model="selected">
chase's avatar
chase committed
114 115
        <button type="button" class="input-arrow-drop-button"
                ng-click="showMenu()">
chase's avatar
chase committed
116 117
        </button>
        <button type="button" class="input-reset-button"
chase's avatar
chase committed
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
                ng-click="clearInput()"
                ng-mouseleave="activeWatcher()"
                ng-mouseenter="closeWatcher()"
                ng-hide="!showOptionMenu && !selected">
        </button>
    </div>

    <div ng-show="showOptionMenu"
         ng-mouseleave="activeWatcher()"
         ng-mouseenter="closeWatcher()"
         class="select-simulator-option-menu">
        <ul>
            <li ng-repeat="value in optionValues track by $index">
                <label style="width: 100%;" ng-click="checksOption()">
                    <input type="{{optionType}}"
                           name="simulatorOptionMenu"
chase's avatar
chase committed
134
                           value="{{value}}" ng-hide="true"
chase's avatar
chase committed
135
                           ng-checked="selected.indexOf(optionValues[$index]) > -1"
chase's avatar
chase committed
136
                           data-key="{{optionKeys[$index]}}"/>
chase's avatar
chase committed
137 138
                    <span class="select-simulator-option-name">{{value}}</span>
                    <i ng-if="selected.indexOf(optionValues[$index]) > -1" class="fa fa-check select-simulator-option-check-icon"></i>
chase's avatar
chase committed
139 140 141 142 143
                </label>
            </li>
        </ul>
    </div>
</div>