Угловой ui-select placeholder не работает

Question

Мы использовали ui-select (https://github.com/angular-ui/ui-select) в раскрывающемся меню темы, например select2. Эта функциональность в основном работала отдельно от одного аспекта: заполнители по умолчанию.

Код в основном следует демонстрационным версиям ui-select (3-й пример на этой странице: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview).

Насколько мне известно, текст по умолчанию должен соответствовать тексту атрибута «placeholder». Вместо этого он отображается пустым, пока вы не выберете опцию. Мы использовали взломы, в соответствии с которыми мы устанавливаем значение ui-select-match, в Angular controller, чтобы противостоять этой проблеме, но это далеко не идеальное и явно не то, как его следует использовать.

<ui-select data-ng-model="producttype.selected" theme="select2" name="product-type"> 
    <ui-select-match placeholder="Select a product type"> 
     {{$select.selected.title}} 
    </ui-select-match> 
    <ui-select-choices repeat="producttype in productTypeOptions | filter: $select.search"> 
     <span ng-bind-html="producttype.title | highlight: $select.search"></span> 
    </ui-select-choices>            
</ui-select> 

Неужели кто-нибудь принял эту проблему раньше или имел какое-либо представление о том, что мы делаем неправильно?

Answer 1

Если вы отключите поиск, это также скроет местозаполнитель, даже если нет выбора.

Пролет заполнитель элемент:

<span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen ng-binding ng-hide">My Placeholder</span> 

Просто убрали "$ select.searchEnabled & &" в шаблоне .js файла и заполнитель появится снова.

Как видно на по hthabet on github

Answer 2

Я столкнулся с этой проблемой, когда у меня было что-то еще в контроллере, связанное с ng-моделью, например producttype.selected. Другая привязка будет инициализировать модель и заставить директиву ui-select вести себя так, как будто выбор уже сделан.

Если это ваша проблема, обратный вызов on-select полезен для привязки ui-select к другому объекту, а затем слияния данных, которые вы хотите вернуть на исходный объект.

Answer 3

Вы также столкнетесь с этой проблемой, если модель вы связываясь с частью объекта и имеет пару ключ/значение, где ключ существует, но значение является нулевым.

<ui-select ng-model="vm.selectedItem.ID">.... 

А вот объект на который ссылается:

vm.selectedItem = { 
    ID: null, 
    description: null 
} 

Это приведет к пустой выбора, а также препятствующий заполнитель от показа. В настоящее время я работаю над решением.

Answer 4

Проверьте класс начальной загрузки «text-muted», присвоенный заполнителю. У него есть свойство, которое устанавливает цвет шрифта «белый». Поэтому попробуйте прокомментировать это свойство. Это сработало для меня.

Answer 5

Ui select не работает, когда объект поиска закрыт или элемент привязки пуст. Самый быстрый способ сделать это, добавив css display: block placeholder item.

.select2-chosen{ 
    display: block !important; 
} 

Или вы можете редактировать ui-select.js.

Answer 6

Вместо редактирования исходного кода вы можете сделать две вещи, чтобы исправить это.

1. Включить enableSearch, как показано ниже.

   $scope.enableSearch = function() { $scope.searchEnabled = true; };

2. Или проверить, что @TDing mentioned или ответ @Steve Эллиса на этом посту.