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