ui 在禁用搜索的情况下选择占位符文本答案

【问题标题】：ui select placeholder text with search disabledui 在禁用搜索的情况下选择占位符文本
【发布时间】：2015-06-05 04:04:51
【问题描述】：

我正在使用角度 ui-select 选择主题。我想禁用搜索，但想显示占位符文本，以便用户知道此选择字段的用途。我尝试将 selectize/match.tpl.html 修改为

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

但这总是呈现为

<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>

如何修改模板以在 Span/Div 中显示占位符文本并默认显示。或者有没有更好的方法来禁用搜索和显示占位符文本？

Example Plunker

我已经为此创建了一个包装器指令，并在下面的链接行中进行了修改

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

再次在控制器中

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

【问题讨论】：

标签： angularjs angular-ui-select

【解决方案1】：

我已经修改了 select.tpl.html，如下所示

$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.否则会被隐藏

【讨论】：

【解决方案2】：

我为此编写了一个包装器指令，更新了如下匹配模板，并使用了 search-enable = false

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

在包装器指令中使用“链接”我正在使用占位符文本更新上面的模板

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

在包装器指令中使用控制器，更新选定的字符串

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

【讨论】：