angular►select

Reset ui-select current value

By: Ryan Wong at

I was having trouble resetting the ui-select directive current selected value when resetting the form.

So here’s the solution. Add this directive to it and it will reset automatically.

Angular:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var app = angular.module('home', [])
.directive('resetsearchmodel', [resetSearchModel])
function resetSearchModel () {
    return {
        restrict: 'A',
        require: ['^ngModel','uiSelect'],
        link: function (scope, element, attrs, ctrls) {
            scope.$watch(attrs.ngModel,function (newval,oldval,scope) {
                if (newval != undefined && newval.length < 1){
                    scope.$select.selected = undefined;
                }
            });
        }
    };
}

HTML:

1
2
3
4
5
6
7
8
9
10
11
<div class="form-group">
  <label class="col-md-2 control-label" for="Competition">Competition</label>
  <div class="col-md-10">
   <ui-select ng-model="toggleSearch" theme="select2" class="full-width" on-select="filterCompetition($item)" allow-clear="true" resetsearchmodel>
    <ui-select-match placeholder="Select a Competition">@{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="oneCompetition in competitionList | filter: $select.search">
      <span ng-bind-html="oneCompetition| highlight: $select.search"></span>
    </ui-select-choices>
  </ui-select>
  </div>
</div>

To reset the value, just set $s.toggleSearch = “”;

Hope this helps you out.