2019年3月18日 星期一

以純html+css模擬彈出式窗口

 <div style="box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);border-radius:10px; padding:10px; text-align:center;background-color:lemonchiffon;position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index:9999;width:500px;" ng-show="showDownload">
            <span ng-click="showDownload=false" class='glyphicon glyphicon-remove' style="position:absolute;right:5px;top:5px;font-size:30px;"></span>
            <h3>請根據下載用途選擇</h3>
            <div class="btn-group" style="width:100%;"><button class="btn btn-primary" style="width:50%" ng-click="excel(1)">內部用</button><button class="btn btn-warning" style="width:50%" ng-click="excel(2)">供應商</button></div>
        </div>

※控制 showDownload 決定是否顯示窗口

2019年3月5日 星期二

ng-options 對應 ng-model 為物件時正確顯示預設值

使用 track by 指定物件對應屬性找出預設選項
ng-model="food.vendor" ng-options='a.text for a in food.vendors track by a.value'
=>food.vendor.value=a.value

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器