Add callback for removal of items from multi-select

Author: vitosamson

examples/demo-multi-select.html

@@ -134,6 +134,21 @@ <h3>Array of objects</h3>
   </ui-select>
   <p>Selected: {{multipleDemo.selectedPeople}}</p>
 
+  <hr>
+  <h3>Deselect callback with single property binding</h3>
+  <ui-select multiple ng-model="multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
+    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
+    <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
+  <p>Last removed item: {{lastRemoved.item}}</p>
+  <p>Last removed model: {{lastRemoved.model}}</p>
+
   <hr>
   <h3>Array of objects with single property binding</h3>
   <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">

examples/demo.js

@@ -99,6 +99,13 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) {
     $scope.eventResult = {item: item, model: model};
   };
 
+  $scope.removed = function (item, model) {
+    $scope.lastRemoved = {
+        item: item,
+        model: model
+    };
+  };
+
   $scope.person = {};
   $scope.people = [
     { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },

src/select.js

@@ -356,9 +356,18 @@
 
     // Remove item from multiple select
     ctrl.removeChoice = function(index){
+      var removedChoice = ctrl.selected[index];
+      var locals = {};
+      locals[ctrl.parserResult.itemName] = removedChoice;
+
       ctrl.selected.splice(index, 1);
       ctrl.activeMatchIndex = -1;
       ctrl.sizeSearchInput();
+
+      ctrl.onRemoveCallback($scope, {
+        $item: removedChoice,
+        $model: ctrl.parserResult.modelMapper($scope, locals)
+      });
     };
 
     ctrl.getPlaceholder = function(){
@@ -571,6 +580,7 @@
         $select.multiple = angular.isDefined(attrs.multiple);
 
         $select.onSelectCallback = $parse(attrs.onSelect);
+        $select.onRemoveCallback = $parse(attrs.onRemove);
 
         //From view --> model
         ngModel.$parsers.unshift(function (inputValue) {

test/select.spec.js

@@ -728,6 +728,63 @@ describe('ui-select tests', function() {
 
   });
 
+  it('should invoke remove callback on remove', function () {
+
+    scope.onRemoveFn = function ($item, $model, $label) {
+      scope.$item = $item;
+      scope.$model = $model;
+    };
+
+    var el = compileTemplate(
+      '<ui-select multiple on-remove="onRemoveFn($item, $model)" ng-model="selection.selected"> \
+        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-choices repeat="person.name as person in people | filter: $select.search"> \
+          <div ng-bind-html="person.name" | highlight: $select.search"></div> \
+          <div ng-bind-html="person.email | highlight: $select.search"></div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    expect(scope.$item).toBeFalsy();
+    expect(scope.$model).toBeFalsy();
+
+    clickItem(el, 'Samantha');
+    clickItem(el, 'Adrian');
+    el.find('.ui-select-match-item').first().find('.ui-select-match-close').click();
+
+    expect(scope.$item).toBe(scope.people[5]);
+    expect(scope.$model).toBe('Samantha');
+
+  });
+
+  it('should set $item & $model correctly when invoking callback on remove and no single prop. binding', function () {
+
+    scope.onRemoveFn = function ($item, $model, $label) {
+      scope.$item = $item;
+      scope.$model = $model;
+    };
+
+    var el = compileTemplate(
+      '<ui-select multiple on-remove="onRemoveFn($item, $model)" ng-model="selection.selected"> \
+        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-choices repeat="person in people | filter: $select.search"> \
+          <div ng-bind-html="person.name" | highlight: $select.search"></div> \
+          <div ng-bind-html="person.email | highlight: $select.search"></div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    expect(scope.$item).toBeFalsy();
+    expect(scope.$model).toBeFalsy();
+
+    clickItem(el, 'Samantha');
+    clickItem(el, 'Adrian');
+    el.find('.ui-select-match-item').first().find('.ui-select-match-close').click();
+
+    expect(scope.$item).toBe(scope.people[5]);
+    expect(scope.$model).toBe(scope.$item);
+  });
+
   it('should append/transclude content (with correct scope) that users add at <match> tag', function () {
 
     var el = compileTemplate(