угловой ui bootstrap typeahead - добавьте класс, когда добавлено к телу

Question

Я использую угловой тип bootstrap в моем проекте. И есть несколько примеров его использования.

http://angular-ui.github.io/bootstrap/#/typeahead

Пара из них непосредственно добавляется к телу с помощью опции «машинописный-конкатенирующего к телу», так что для одного экземпляра, мне нужно настроить презентацию, то есть может быть добавлен класс CSS к тому, что конкретный экземпляр, т. е. в раскрывающееся меню ul, которое он создает. Но я не могу этого сделать, поскольку я не мог найти никакого способа. Если бы это было добавлено к родителям элемента ввода, это было бы легко, но при добавлении к телу это кажется трудным.

<input type="text" typeahead-append-to-body="true" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html"> 

Я не хочу, чтобы непосредственно предназначаться с помощью тела> .dropdown-меню, как это будет влиять на другие экземпляры, а также.

Answer 1

Я, наконец, понял, я мог бы просто использовать селектор атрибутов css, нацеленный на шаблон html, который я использую.

С помощью attibute "typeahead-template-url = 'mysearchdropdownpage.html'", который упоминается в input typeahead, я написал следующее в css.

HTML

<input type="search" typeahead="searchItem for searchItem in searchTypeAhead" typeahead-template-url = 'mysearchdropdownpage.html' /> 

CSS

ul.dropdown-menu[template-url='mysearchdropdownpage.html'] 

и его работы хорошо.

Answer 2

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

<input class="u-targetting-typeahead" ...> 

... Затем в файл CSS ...

.u-targetting-typeahead > .dropdown-menu 

... который затем ссылается только это выпадающее меню ввода.

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

РЕГУЛИРОВКА

Глядя ...

машинописный-конкатенирующего к кузову (по умолчанию: ложь): Если машинописный всплывающее окно прилагается к $ телу вместо родительского элемента?

Если вы установили это на false, метод выше будет работать. Я не вижу других разумных альтернатив.