Giao diện người dùng góc Chọn mục bị xóa khi nhấp vào

Question

Tôi đang sử dụng UI-Select, tôi nhận thấy rằng việc nhấp vào bất kỳ thẻ nào làm cho chúng trở thành màu xanh dương, không có mục đích cho những gì tôi muốn làm. Tôi muốn chúng bị xóa nếu được nhấp. Sau khi kiểm tra, tôi nhận thấy 'x' phát ra sau:

ng-click="$selectMultiple.removeChoice($index)" 

Thực hiện một số thao tác tìm thấy mẫu được kích hoạt, đó là "match-multiple.tpl.html". Tôi sao chép ng-click vào đầu vào, làm cho nó như sau.

<span class="ui-select-match"> 
    <span ng-repeat="$item in $select.selected"> 
    <span 
     class="ui-select-match-item btn btn-default btn-xs" 
     tabindex="-1" 
     type="button" 
     ng-disabled="$select.disabled" 

     ng-click="$selectMultiple.removeChoice($index)" 
     ng-class="{'btn-primary':$selectMultiple.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}" 
     ui-select-sort="$select.selected"> 
     <span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span> 
    <span uis-transclude-append></span> 
    </span> 
</span> 
</span> 

này đã phá vỡ hệ thống thẻ (xem ảnh)

EDIT - thử những điều sau đây, lỗi đã biến mất nhưng nhấp chuột không làm bất cứ điều gì.

 ng-click="$selectMultiple.activeMatchIndex.removeChoice($index)" 

Làm thế nào tôi có thể đính kèm các ng-cick vào thẻ như trái ngược với 'X'?

Answer 1

Bạn đang đi đúng hướng. Tôi không thể nhìn thấy mã đầy đủ của bạn (bao gồm cả mã Angular) vì vậy rất khó để xem tại sao nó không hoạt động, tuy nhiên this Fiddle cho thấy một ví dụ làm việc - thêm một vài tên vào ui-select rồi bấm vào bất kỳ vị trí nào trên tên (không chỉ 'x') để xóa chúng.

Các ui-chọn được cấu hình như sau:

<ui-select multiple tagging ng-model="vm.selected" theme="bootstrap"> 
    <ui-select-match placeholder="Pick one...">{{$item.value}}</ui-select-match> 
    <ui-select-choices repeat="val in vm.values | filter: $select.search track by val.value"> 
     <div ng-bind="val.value | highlight: $select.search"></div> 
    </ui-select-choices> 
    </ui-select> 

Các mã sau sẽ ghi đè mặc định 'bootstrap/match-multiple.tpl.html' mẫu với một tùy chỉnh một trong đó có trường hợp ng-click vào span cha mẹ (như bạn đã làm) - lưu ý rằng đã có một ng-click vào khoảng ng-click="$selectMultiple.activeMatchIndex = $index;", tôi đã phải loại bỏ điều này và thay thế nó bằng ng-click="$selectMultiple.removeChoice($index)". Khối mã này yêu cầu ui-chọn sử dụng mẫu tùy chỉnh này thay vì mẫu mặc định một:

app.run(['$templateCache', function($templateCache) { 
    $templateCache.put('bootstrap/match-multiple.tpl.html', 
    '<span class="ui-select-match">' + 
     '<span ng-repeat="$item in $select.selected track by $index">' + 
      '<span ' + 
       'ng-click="$selectMultiple.removeChoice($index)" ' + 
       'class="ui-select-match-item btn btn-default btn-xs" ' + 
       'tabindex="-1" ' + 
       'type="button" ' + 
       'ng-disabled="$select.disabled" ' + 
       'ng-class="{\'btn-primary\':$selectMultiple.activeMatchIndex === $index, \'select-locked\':$select.isLocked(this, $index)}" ' + 
       'ui-select-sort="$select.selected">' + 
      '<span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span>' + 
      '<span uis-transclude-append></span>' + 
     '</span>' + 
     '</span>' + 
    '</span>'); 
}]);