I am using UI-Select, I noticed that clicking any of the tags makes them blue, which has no purpose for what I would like to do. I would like them removed if clicked. Upon inspection I noticed an 'x' that fires off following:
ng-click="$selectMultiple.removeChoice($index)"
Doing some digging I found the template where this is fired off, it's "match-multiple.tpl.html". I copied the ng-click to the input, making it the following.
<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)"> ×</span>
<span uis-transclude-append></span>
</span>
</span>
</span>
This broke the tag system (see image)
EDIT - tried the following, error is gone but the click is not doing anything.
ng-click="$selectMultiple.activeMatchIndex.removeChoice($index)"
How can I attach the ng-cick to the tag as opposed to the 'X'?
I am using UI-Select, I noticed that clicking any of the tags makes them blue, which has no purpose for what I would like to do. I would like them removed if clicked. Upon inspection I noticed an 'x' that fires off following:
ng-click="$selectMultiple.removeChoice($index)"
Doing some digging I found the template where this is fired off, it's "match-multiple.tpl.html". I copied the ng-click to the input, making it the following.
<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)"> ×</span>
<span uis-transclude-append></span>
</span>
</span>
</span>
This broke the tag system (see image)
EDIT - tried the following, error is gone but the click is not doing anything.
ng-click="$selectMultiple.activeMatchIndex.removeChoice($index)"
How can I attach the ng-cick to the tag as opposed to the 'X'?
Share Improve this question edited Jun 19, 2015 at 14:54 asked Jun 19, 2015 at 14:48 user3196599user31965991 Answer
Reset to default 6You're on the right lines. I can't see your full code (including Angular code) so it's difficult to see why it's not working, however this Fiddle shows a working example - add a couple of names into the ui-select then click anywhere on the name (not just the 'x') to remove them.
The ui-select is configured as follows:
<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>
The following code overrides the default 'bootstrap/match-multiple.tpl.html' template with a custom one which has the ng-click event on the parent span (like you did) - note that there was already an ng-click on the span ng-click="$selectMultiple.activeMatchIndex = $index;"
, I had to remove this and replace it with ng-click="$selectMultiple.removeChoice($index)"
. This block of code tells ui-select to use this custom template rather than it's default one:
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)"> ×</span>' +
'<span uis-transclude-append></span>' +
'</span>' +
'</span>' +
'</span>');
}]);