Угловой пользовательский интерфейс Выберите удалить элемент по клику

Question

Я использую UI-Select, я заметил, что нажатие любого из тегов делает их синими, что не имеет никакой цели для того, что я хотел бы сделать. Я бы хотел, чтобы они удалялись, если щелкнуть. После осмотра я заметил «х», что выстреливает следующее:

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

Выполнение некоторых рытье я нашел шаблон, где это выпалил, это «матч-multiple.tpl.html». Я скопировал ng-click на вход, сделав его следующим.

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

Это сломал систему тегов (см изображение)

EDIT - попытался следующие, ошибка исчезает, но щелчок ничего не делает.

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

Как я могу прикрепить нг-cick к теге в противоположность «X»?

Answer 1

Вы находитесь на правильных линиях. Я не вижу ваш полный код (включая угловой код), поэтому трудно понять, почему он не работает, однако this Fiddle показывает рабочий пример - добавьте пару имен в ui-select, затем щелкните в любом месте имени (а не только 'x'), чтобы удалить их.

пользовательский интерфейс, выберите настраивается следующим образом:

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

Следующий код отменяет «/ матч-multiple.tpl.html самозагрузки» шаблон по умолчанию с пользовательской один, который имеет нг щелкните событие на родительский диапазон (как и вы) - обратите внимание, что уже был ng-клик по диапазону ng-click="$selectMultiple.activeMatchIndex = $index;", мне пришлось удалить это и заменить его на ng-click="$selectMultiple.removeChoice($index)". Этот блок кода сообщает ui-select использовать этот настраиваемый шаблон, а не по умолчанию:

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>'); 
}]);