AngularJS — ui.bootstrap typehead с гетерогенным массивом данных

Я пишу панель поиска с вводом текста, используя ui.bootstrap typeahead, и обнаружил, что этот компонент довольно прост в использовании.

Мой Контроллер передает данные в $scope следующим образом:

var good = [{ name: 'Mario', role: 'sup' },
            { name: 'Luigi', role: 'bro' },
            { name: 'Yoshi', role: 'pet' }]

var bad = [{ badname: 'Bowser', role: 'boss' },
           { badname: 'Sauron', role: 'eye' },
           { badname: 'Jason', role: 'knifer' }]

$scope.data = good.concat(bad)


Затем в Вид у меня есть что-то вроде этого:

<div class="container-fluid">
    <pre>Model: {{selected| json}}</pre>
    <input type="text" ng-model="selected" typeahead="datum.name for datum in data | filter:$viewValue | limitTo:4">
</div>


Это приводит к поиску хороших парней, а не плохих (потому что у них badname вместо name).

Есть ли способ найти и то, и другое?

Бонус: я хотел бы показать role моих парней под их именами... подсказки?
Изменить: мне известно об этом упреждающем вводе с использованием имени объекта для выбора всего объекта, но я надеялся показать его и во всплывающем окне...
Здесь добавлен Plnkr --> http://plnkr.co/edit/KqvUlf

Держите консоль открытой, и вы увидите проблему с ярлыком, о котором я говорил

Появляются только хорошие парни, конец даже тогда, когда поиск выдает исключение при поиске несуществующего поля в плохом ребята


angularjs angular-ui-bootstrap bootstrap-typeahead
person domokun    schedule 26.11.2013    source источник
comment
Я мог бы взглянуть на это, если бы вы предоставили plunker.   -  person pkozlowski.opensource    schedule 26.11.2013
comment
@pkozlowski.opensource Вы правы, я добавил plnkr, чтобы продемонстрировать проблему. Проверьте это, пожалуйста.   -  person domokun    schedule 27.11.2013

Ответы (3)


arrow_upward
4
arrow_downward

Я отредактировал ваш plunkr, чтобы ответить на ваш бонусный вопрос:

http://plnkr.co/edit/Yo4xBT?p=preview

По сути, вы можете использовать пользовательский шаблон, чтобы делать с совпадением все, что захотите.

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

Изменить: мне нравятся ваши данные json.

person Nikola Yovchev    schedule 27.11.2013
comment
Спасибо, это очень интересно! Я заметил, например, что подсветка полей исчезла, что, как я полагаю, является частью какого-то шаблона по умолчанию... Есть ли место, где я могу найти его, чтобы немного взломать? о, кстати, спасибо за jsons :D - person domokun; 27.11.2013
comment
Вы можете просто изучить код typehead или просто использовать плагин по умолчанию и скопировать стили в свой шаблон, что я бы и сделал. - person Nikola Yovchev; 27.11.2013
comment
Большой! Я копался в коде и нашел способ решить обе проблемы. Я отвечу очень скоро. Огромное спасибо за помощь. - person domokun; 27.11.2013
comment
Мне было интересно, поскольку шаблон представляет собой всего пару строк HTML, я мог бы скопировать то, что вы сделали в ui.bootstrap с помощью модуля $templateCache. Я пытался вставить typeahead-template-url='typeahead-match.html' и $templateCache.put('typeahead-match.html', '...'), но он показывает только пустые строки... У вас есть какие-нибудь подсказки? - person domokun; 27.11.2013
comment
Я сам не большой пользователь $templateCache, но я не думаю, что это должно быть проблемой. Если вы консольно зарегистрируете получение в своем контроллере, что вы получите? - person Nikola Yovchev; 27.11.2013

arrow_upward
4
arrow_downward

Благодаря @baba мне удалось решить как основную, так и бонусную проблему.

Главная проблема

Чтобы ваши данные были правильно маркированы даже с разными именами свойств, вы можете указать несколько меток в HTML.

<div class="container-fluid" ng-controller="TypeaheadCtrl">
  <pre>Model: {{selected| json}}</pre>
  <input type="text" ng-model="selected" 
      typeahead="datum as (datum.name+datum.badname) for datum in data | filter:$viewValue | limitTo:8" 
      typeahead-template-url='tpl.html'>
</div>


Будет отображаться один или другой, в зависимости от данных.
Проблема в том, что если присутствуют оба, они будут оба отображаться...

Тем не менее, вероятно, лучший выбор — это создать хорошо отформатированный массив для ввода текста, не возясь с кодом, как предложил @baba

Бонусный вопрос

Используя шаблон соответствия, проблема легко решается (например) следующим образом:

tpl.html

    <a>
        {{match.label}}<br>
        {{match.model.role}}
    </a>

Именно так.

Спасибо еще раз, ребята

person domokun    schedule 27.11.2013

arrow_upward
1
arrow_downward

Разъяснение другим с теми же сомнениями, что и у меня. Если вам интересно, почему подсветка исчезла, вам просто нужно применить к вашему шаблону фильтр ниже.

<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
person Thiago C. S Ventura    schedule 09.02.2015
comment
Как выделить, если у меня в шаблоне более одного элемента SPAN? - person Deepak K; 14.10.2015