AngularJS UI-Bootstrap Typeahead нет совпадений

Я искал вокруг, но не нашел ни одного вопроса, касающегося этого.

Я использую тип Angular UI-bootstrap.

Так что я

<input type="text" ng-model="loc" typeahead="location for location in filteredLocations = (locations | filter:$viewValue)" class="form-control" placeholder="Location" />

Когда я печатаю, он показывает параметры в div typeahead-popup. Но что я должен сделать, чтобы показать, когда совпадений нет, в том же всплывающем окне «Совпадения не найдены»?

заранее спасибо


javascript angularjs twitter-bootstrap typeahead
person Ale Ponzo    schedule 09.04.2014    source источник
comment
У меня не так много идей, но что делать, узнать, соответствует ли match.length ‹= 0, затем поместить один элемент в массив элементов, один элемент, который не должен быть выбран, иначе удалите последний нажатый элемент.   -  person Priya    schedule 15.05.2014

Ответы (2)


arrow_upward
4
arrow_downward

Что вы можете сделать, так это создать свой собственный список результатов. Это легко с помощью typeahead-template-url="customTemplate.html" и этого:

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
  </a>
</script>

Если результатов нет, верните один элемент, указывающий на отсутствие результата. В ng-template вы можете поместить ng-if, который проверяет, является ли это элементом без результатов, и делает его недоступным для кликов. Таким образом, пользователь не может выбрать «нет результатов».

person gidomanders    schedule 14.10.2014
comment
Привет @gidomanders, что именно вы подразумеваете под возвратом одного элемента, указывающего на отсутствие результата? Спасибо - person Uri Klar; 13.04.2015
comment
Я имею в виду использование функции вместо встроенного фильтра, и в вашей функции фильтра возвращается пустой элемент или элемент, указывающий, что совпадение не найдено. Затем в шаблоне ng проверьте, содержит ли результат этот элемент, используя ng-if или ng-show/ng-hide. Если это так, отобразите не найденное совпадение, в противном случае отобразите результаты. - person gidomanders; 13.04.2015
comment
Могу я спросить, как вы смогли сделать элемент не кликабельным? - person pwhelly; 26.05.2015
comment
Вместо использования привязки просто используйте другой элемент, например диапазон или абзац. Поэтому используйте ng-if not empty ‹a› и ng-if empty другой элемент. - person gidomanders; 26.05.2015
comment
Я пытался это сделать, но диапазон по-прежнему доступен для кликов. Не могли бы вы взглянуть на это и посмотреть, сможете ли вы определить, что я делаю неправильно plnkr. co/edit/iWoq5J4dUhT5xqBQmPyh?p=preview - person pwhelly; 27.05.2015
comment
Добавьте if (company.companyname === 'No Results') в функцию companySelected, и все готово. - person gidomanders; 28.05.2015
comment
Проблема заключается в том, что при нажатии на элемент без результатов срабатывает метод selectMatch typeahead, который окружает элемент списка, и «Нет результатов» оказывается в текстовом вводе. Спасибо за вашу помощь в любом случае. Я думаю, что в конечном итоге я просто проверю количество результатов, возвращенных службой, и, если число равно 0, тогда установлю видимость аналогичного стиля div «Нет результатов». - person pwhelly; 28.05.2015
comment
Вот почему вам нужно, если в selectedCompany вы должны вернуть false или очистить ввод самостоятельно при нажатии. Удачи! - person gidomanders; 28.05.2015
comment
сохраните входной текст на ng-change, затем в функции выбора поместите сохраненный текст в модель. - person Christine; 30.07.2015
comment
Как это будет работать, если вы используете typeahead-popup-template-url. У меня есть кнопка «Создать новый» для отображения вместе с «Результаты не найдены», но с typeahead-popup-template-url раскрывающийся список не запускается, если у вас нет результатов. Есть ли способ решить эту проблему? - person pragya.go; 02.01.2020

arrow_upward
1
arrow_downward

На веб-сайте UI Bootstrap показана директива typeahead-no-results="noResults". Затем у него есть <div ng-show="noResults"> с глификоном и сообщением «Результаты не найдены». Полный код:

<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
  <i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
person Thomas David Kehoe    schedule 21.03.2016