Xóa tùy chọn đã chọn trong ui-chọn góc

Question

Bất cứ ai cũng biết cách xóa giá trị đã chọn của hộp ui-chọn trong góc?

Tôi muốn chức năng của select2 mà bạn có x nhỏ trong hộp chọn. Không giống như nó có phương pháp cho phép rõ ràng mà select2 nhận được.

Answer 1

Có một tùy chọn allow-clear cho ui-select-trận đấu mà không được điều cho bạn, bạn sẽ có x bên phải và bạn có thể xóa nó bằng cách nhấp vào nó. https://github.com/angular-ui/ui-select/wiki/ui-select-match

dụ nhanh:

<ui-select-match allow-clear="true" placeholder="Select or search a country in the list..."> 
    <span>{{$select.selected.name}}</span> 
</ui-select-match> 

dụ làm việc: http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

Answer 2

Bạn có thể thêm một nút X nhỏ khi bạn hiển thị lựa chọn.

<ui-select-match placeholder="Select or search a country in the list..."> 
    <span>{{$select.selected.name}}</span> 
    <button class="clear" ng-click="clear($event)">X</button> 
</ui-select-match> 

Sau đó, bạn dừng sự kiện nhấp chuột đó để sủi bọt và kích hoạt sự kiện mở. Và bạn xóa trường bằng cách ghi đè lên mô hình đã chọn.

$scope.clear = function($event) { 
    $event.stopPropagation(); 
    $scope.country.selected = undefined; 
}; 

Đây là plnkr. http://plnkr.co/edit/qY7MbR

Answer 3

Nếu bạn đang sử dụng bootstrap, từ quan điểm thiết kế, bạn cũng có thể sử dụng biểu tượng fa-remove.

Ngoài ra, từ góc độ khả năng sử dụng, bạn có thể muốn căn chỉnh biểu tượng xóa ở bên trái.

Các JS:

<ui-select-match placeholder="Select or find..."> 
    <button class="clear-btn" ng-click="clear($event)"> 
     <span class="fa fa-remove"></span> 
    </button> 
    <span class="clear-btn-offset">{{$select.selected}}</span> 
</ui-select-match> 

CSS:

.select2 .clear-btn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 5px 10px; 
    position: absolute; 
    left: -2px; 
    top: 1px; 
} 

.clear-btn-offset { 
    position: absolute; 
    left: 25px; 
} 

Mở mã chỉ thị:

$scope.clear = function($event) { 
    $event.stopPropagation(); 
    // Replace the following line with the proper variable 
    $scope.country.selected = undefined; 
}; 

Answer 4

Lưu ý: nếu chúng ta sử dụng gắn thẻ và gắn thẻ-label = "false" trong trường hợp đó cho phép rõ ràng chức năng không hoạt động.

chức năng chỉnh rõ ràng

HTML Mã

<ui-select-match placeholder=”Enter table…”> 
<span>{{$select.selected.description || $select.search}}</span> 
<a class=”btn btn-xs btn-link pull-right” ng-click=”clear($event, $select)”><i class=”glyphicon glyphicon-remove”></i></a> 
</ui-select-match> 

điều khiển Mã hành động

function clear($event, $select){ 
//stops click event bubbling 
$event.stopPropagation(); 
//to allow empty field, in order to force a selection remove the following line 
$select.selected = undefined; 
//reset search query 
$select.search = undefined; 
//focus and open dropdown 
$select.activate(); 
}