2017年8月17日 星期四

按鈕群組按下效果

靜態寫法(單選)
====
<div class="btn-group" style="margin-left:10px"> <label class="btn btn-primary" ng-model="pass" uib-btn-radio="">全部</label> <label class="btn btn-primary" ng-model="pass" uib-btn-radio="false">未過帳</label> <label class="btn btn-primary" ng-model="pass" uib-btn-radio="true">已過帳</label> </div>

動態寫法(單選)
====
<div class="btn-group"> <label class="btn btn-primary" ng-model="$parent.from" uib-btn-radio="'{{obj.from | date:'yyyy/M'}}'" ng-repeat="obj in dateRange">{{(obj.from | date:'yyyy/M')+'~'+(obj.to | date:'M')}}</label> </div>

動態寫法(多選)
====
<div class="btn-group"> <label class="btn btn-primary" ng-repeat="date in dates" ng-model="date.checked" uib-btn-checkbox>{{date.shortText}}</label></div>

自訂css
====
.btn-date {
        color: black;
        background-color: #f8f8f8;
        border-color: #ccc;
    }
.btn-date.active, .btn-date:active, .open > .dropdown-toggle.btn-date {
        color: #ffffff;
        background-color: #449d44;
        border-color: #398439;
    }

沒有留言:

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

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