2018年12月21日 星期五

ui-select 複選用法

html
====
<ui-select multiple ng-model="filterStatus.selecteds"><ui-select-match placeholder="狀態過濾...">{{$item.text}}</ui-select-match><ui-select-choices repeat="obj in filterStatuss | filter: {text: $select.search} track by obj.value">{{obj.desc}}</ui-select-choices></ui-select>

javascript
====
$scope.filterStatuss = [{ value: 1, text: '未建立', desc: '未建立完畢' }, { value: 2, text: '未認款', desc: '已建立未認款' }, { value: 3, text: '未報件', desc: '已認款未報件' }];
$scope.filterStatus = { selecteds: [] };

※取值 => Enumerable.From($scope.filterStatus.selecteds).Select('$.value').ToArray();

css
====
.ui-select-match .btn-xs {
    font-size: unset;  // 選取按鈕字不要變小
}

.ui-select-multiple .ui-select-search {
    width: 30px !important; // 避免點選區域太寬
}

 .ui-select-multiple.ui-select-bootstrap input.ui-select-search {
    background-color:  lightgoldenrodyellow !important; // 設定點選區域底色
}

.ui-select-match .btn { // 已選取按鈕內間距調整
    opacity: unset;
    padding: 4px;
}

.ui-select-match-close {
    margin-right: -5px;  //  已選取按鈕X位置調整
}

2018年12月14日 星期五

ui-select 於 $uibModal 中正確顯示下拉選單

append-to-body="false"

若遇到被其他物件遮住的問題,則改用以下方法
append-to-body="true" style="z-index:9999;"

ui-select 調整下拉選單寬度和位置

.ui-select-bootstrap > .ui-select-choices, .ui-select-bootstrap > .ui-select-no-choice {
    width: unset; // 依據內容最大寬度決定
    left: unset; // 避免左邊界從下拉選單位置開始
    right: -80px; // 靠右
}


2018年12月13日 星期四

取得目前網址

目前動作網址 => Request.Url.AbsoluteUri.TrimEnd(Request.Url.Query);
目前預設動作網址 => Request.Url.Scheme + "://" + Request.Url.Authority +  Url.Action("Index");

自訂驗證規則

html
====
<input validator1 type='text' class='form-control' ng-model='uniform'><span style='color:red' ng-show="form1.$error.validator1">*</span>

javascript
====
directive("validator1", function () {
        return {
            restrict: 'A',
            require: "ngModel",
            link: function (scope, element, attributes, ngModel) {
                ngModel.$validators.validator1 = function (modelValue, viewValue) {
                    ... // return true or false
                }
            }
        };
    })

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

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