CODEWITHSUNDEEP
angularjsangular-ui-select
Naresh
Naresh

Reputation: 3

ui select placeholder text with search disabled

I am using angular ui-select Selectize Theme. I want to disable search but would like to show place holder text so that user know what is this select field is used for. I tried modifying selectize/match.tpl.html to 

<div ng-hide=\"($select.open || $select.isEmpty())\" class=\"ui-select-match\" ng-transclude=\"\">{{$select.placeholder}}</div>

But this always rending as

<div ng-hide="($select.open || $select.isEmpty())" class="ui-select-match ng-hide" ng-transclude="" placeholder="Select or search a country in the list..."><span class="ng-binding ng-scope"></span></div>

How to modify template to show place holder text in Span/Div and show it by default. Or is there any better way to disable search and show placeholder text ?

Example Plunker

i have created a wrapper directive over this and modifying inside a link line below

  angular.element(angular.element($element[0])).find('span').text($scope.placeholder)

and again in controller 

 angular.element(angular.element($element[0])).find('span').text(scope.name)

Upvotes: 0

Views: 2869

Answers (2)

Naresh217
Naresh217

Reputation: 420

I have modified select.tpl.html like below

$templateCache.put("selectize/select.tpl.html","<div class=\"selectize-control single\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.activate()\"><div class=\"ui-select-match\"></div><div class=\"ui-select-placeholder\" ng-hide=\"!$select.isEmpty()\">{{$select.placeholder}}</div><input type=\"text\" autocomplete=\"off\"  tabindex=\"-1\" class=\"ui-select-search ui-select-toggle\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" readonly ng-model=\"$select.search\" ng-hide=\"!$select.searchEnabled || ($select.selected && !$select.open)\" ng-disabled=\"$select.disabled\"></div><div class=\"ui-select-choices\"></div></div>");}]);

Which adds a div with placeholder when selection is empty. Else it will be hidden

Upvotes: 0

Naresh217
Naresh217

Reputation: 420

I wrote a wrapper directive around this, updated match template like below, and using search-enable = false

$templateCache.put("selectize/match.tpl.html","<div class=\"ui-select-match\" ng-transclude=\"\"></div>");

using "link" in wrapper directive i am updating above template with palceholder text

  angular.element(angular.element($element[0])).find('span').text($scope.placeholder)

using controller in wrapper directive, updating selected string

 angular.element(angular.element($element[0])).find('span').text(scope.name)

Upvotes: 0

Related Questions