UI 선택 각도에서 선택한 옵션 지우기

UI 선택 각도에서 선택한 옵션 지우기

---

누구나 각도에서 UI 선택 상자의 선택한 값을 지우는 방법을 알고 있습니까?

선택 상자에 작은 x가있는 select2의 기능을 원합니다. select2가 얻은 allow-clear 메서드가있는 것 같지 않습니다.

---

select2 테마를 사용하는 경우 이를 수행 allow-clear하는 ui-select-match지시문 에 대한 옵션 이 있습니다. 오른쪽에 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

이것은 현재 부트 스트랩 또는 테마 선택을 사용하여 작동하지 않습니다.

---

선택 항목을 표시 할 때 작은 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

---

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

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

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

지시어 코드 :

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

---

참고 : 태그 지정 및 tagging-label = "false"를 사용한 경우이 경우 allow-clear 기능이 작동하지 않습니다.

커스텀 클리어 기능

HTML 코드

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

컨트롤러 동작 코드

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

참조 URL : https://stackoverflow.com/questions/26389542/clear-selected-option-in-ui-select-angular