Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Need a way to register and fire a callback on clicking a tag (In addition to making it the active match) in a multiple select list. #2169

Open
xtresoft/ui-select
#1
@janarthanancs

Description

@janarthanancs

Hello,

Noticed that ui-select with multiple attribute doesn't fire any callback when a tag is clicked from the matches list. This hinders the user to access the selected/active tag value when clicking on it.

After digging further found that the only way to access the selected tag is $select.selected[$selectMultiple.activeMatchIndex]

The value add of exposing the above tag via a callback is,

  1. If the choices object has a property that is too big to read and if we want to display the property value on click of the tag
  2. The user wants to remove the tag on clicking it, this comes handy.
  <span ng-repeat="$item in $select.selected track by $index">
    <span
      class="ui-select-match-item btn btn-default btn-xs"
      tabindex="-1"
      type="button"
      ng-disabled="$select.disabled"
      ng-click="$selectMultiple.activeMatchIndex = $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>

I would like to contribute on the above by allowing the user to register a callback to be fired with the tag value and the $selectMultiple object reference when it is clicked.

Something like ng-click="selectMultiple.activeMatchIndex = $index; $select.tagClicked($selectMultiple, $item);"

UI-Select version: 0.19.3
Angular JS version: 1.2.8

Created a simple plunker demonstrating the above.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions