Создание пользовательских данных с опережением ввода angular-bootstrap

У меня возникли проблемы с созданием списка для директивы bootstrap ui-typeahead:

$http-вызов возвращает следующий json:

[{"title":"FOO", "equipment":[{"model":"Model 1"}, {"model":"Model 2"}], "combine":"true"}]

Что мне нужно сделать, это:

  1. объединить заголовок «FOO» с вводом, который пользователь уже ввел в поле ввода, и
  2. создайте список оборудования: «Модель 1» и «Модель 2» (фактические раскрывающиеся данные) либо как 2 отдельных раскрывающихся элемента ИЛИ объедините «Модель 1» и «Модель 2», если для «объединения» установлено значение « true", что даст только ОДИН элемент раскрывающегося списка.

При нажатии на одну из записей «оборудование» в раскрывающемся списке мне нужно вызвать функцию, которая устанавливает выбранную модель в объекте службы, а затем вызывает функцию URL-адреса $location.

Это возможно?

Вот шаблон, который я использую через "typeahead-template-url":

<input typeahead="val for val in autoComplete($viewValue)"
  typeahead-template-url="searchAutocompleteTpl.html"  
  ng-model="query"/>

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span>found in: </span>
  <div ng-repeat="eqp in match.model.equipment">
    <a href="" ng-click="showItem(eqp.model)">
      {{eqp.model}}
    </a>
  </div>
</script>

angularjs angular-ui-bootstrap
person recalcitrant    schedule 28.08.2013    source источник
comment
Это определенно возможно и без необходимости в специальном шаблоне IMO. Если бы вы могли поместить свой код в плункер, я мог бы поиграть с ним.   -  person pkozlowski.opensource    schedule 28.08.2013
comment
Это не совсем ваш вопрос, но вы можете посмотреть здесь и, возможно, найти вдохновение для работы с вашими данными: stackoverflow.com/questions/20220399/   -  person domokun    schedule 02.07.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вам необходимо обновить шаблон:

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span>found in: {{match.model.title}}{{query}}</span>
  <div ng-show="match.model.combine=='true'" ng-repeat="eqp in match.model.equipment">
    <a href="" ng-click="showItem(eqp.model)">
      {{eqp.model}}
    </a>
  </div>
  <div ng-show="match.model.combine=='false'">
    <a href="" ng-click="showItem(eqp.model)" ng-repeat="eqp in match.model.equipment">
      {{eqp.model}}
    </a>
  </div>
</script>

Для вашего вопроса 1 отметьте <span>found in: {{match.model.title}}{{query}}</span>. С помощью запроса модели вы можете получить доступ к введенному значению и соединить с ним заголовок.

Для вопроса 2 я использовал разные элементы div и показывал только соответствующий элемент в зависимости от комбинированного значения.

Я также сделал Fiddler, надеюсь, это поможет (это не красота, но работает).

ЗолиР

person Zoltán Rajkai    schedule 10.02.2016