Угловой UI-Select заполнитель не работает

Мы использовали 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, чтобы противостоять этой проблеме, но это далеко от совершенства и явно не так, как его следует использовать.

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

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

Источник

7 ответов

Решение

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

Элемент spanplace заполнителя:

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

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

Как видно по алфавиту на GitHub

Источник

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

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

Источник

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

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

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

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

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

Источник

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

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

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

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

Источник

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

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

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

Источник

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

Источник

Проблема здесь заключается в проверке isEmpty в файле select.js.

просто замените эту проверку

значение = ctrl.selected; angular.isUndefined(значение) || значение === ноль;

с

angular.isUndefined (значение) || значение === ноль || angular.equals({}, значение);

Источник
Другие вопросы по тегам