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位置調整
}

沒有留言:

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

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