Angular UI Выберите удалить элемент по клику

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

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

Покопавшись, я нашел шаблон, в котором это срабатывает, это «match-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>

Это сломало систему тегов (см. изображение) введите здесь описание изображения

РЕДАКТИРОВАТЬ - попробовал следующее, ошибка исчезла, но щелчок ничего не делает.

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

Как я могу прикрепить ng-cick к тегу, а не к «X»?


javascript angularjs ui-select angularjs-select2 angular-ui-select
person Community    schedule 19.06.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вы на правильном пути. Я не вижу ваш полный код (включая код Angular), поэтому трудно понять, почему он не работает, однако эта Fiddle показывает рабочий пример — добавьте пару имен в пользовательский интерфейс, затем щелкните в любом месте имени (не только «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>

Следующий код переопределяет шаблон по умолчанию «bootstrap/match-multiple.tpl.html» на пользовательский, который имеет событие ng-click в родительском диапазоне (как и вы) — обратите внимание, что ng-щелчок уже был на span 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>');
}]);
person Ian A    schedule 12.10.2016
comment
Спасибо, что нашли время, чтобы посмотреть на этот вопрос, однако он довольно старый. Я сейчас плаваю в земле React :D ха - person ; 12.10.2016
comment
Не беспокойтесь :) у него было несколько просмотров, так что, надеюсь, ответ поможет и другим. - person Ian A; 12.10.2016
comment
ОТЛИЧНО!! Я столкнулся с той же проблемой в течение недели! Большое спасибо! - person xero399; 07.02.2020