ui 선택 각도에서 선택된 옵션 지우기

Question

각도로 ui 선택 상자의 선택된 값을 지우는 방법을 아는 사람이 있습니까?

selectbox에 작은 x가있는 곳에서는 select2의 기능을 원합니다. select2에 허용 된 명확한 방법이있는 것 같지 않습니다.

Answer 1

당신을 위해, 당신은 x가 오른쪽에있을 것이고 당신은 이것을 클릭하여 지울 수 있습니다. https://github.com/angular-ui/ui-select/wiki/ui-select-match

빠른 예 :

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

근무 예 : http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

Answer 2

선택 사항을 표시 할 때 작은 X 버튼을 추가 할 수 있습니다.

<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> 

그런 다음 클릭 이벤트가 버블 링되는 것을 중지하고 열린 이벤트를 트리거합니다. 선택한 모델을 덮어 쓰면 필드가 지워집니다.

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

여기는 plnkr입니다. http://plnkr.co/edit/qY7MbR

Answer 3

부트 스트랩을 사용하는 경우 디자인 측면에서 fa- 제거 아이콘을 사용할 수도 있습니다.

또한 사용 편의성 측면에서 제거 아이콘을 왼쪽에 정렬 할 수 있습니다.

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; 
} 

지시어 코드에 다음을 수행 UI - 선택 일치하는 옵션 allow-clear 있습니다

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

Answer 4

참고 : 우리가 할 수 맑은이 경우 태그 및 태그 라벨 = "false"로 사용하는 경우 기능이 작동하지.

사용자 정의 명확한 기능

HTML 코드 exiadbq의 솔루션은 간단한 방법으로 같은 기능을 제공합니다

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(); 
}