AngularJS UI-Bootstrap Typeahead 일치하지 않음

Question

주변에서 검색을 해보았지만 관련한 질문이 없습니다.

각도 UI 부트 스트랩 선행 사용하고 있습니다. 나는 그것이 선행 입력-팝업 DIV의 옵션을 보여줍니다 입력 할 때

그래서 나는

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

있습니다. 하지만 일치하는 항목이 없다면 "일치하는 항목이 없습니다"라는 팝업을 표시하려면 어떻게해야합니까?

미리 감사드립니다.

Answer 1

당신이 할 수있는 것은 결과 목록을 만드는 것입니다. 즉 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를 입력하여 no-results 요소인지 확인하고 클릭 할 수 없게 만들 수 있습니다. 그런 식으로 사용자는 "결과 없음"을 선택할 수 없습니다.

Answer 2

UI 부트 스트랩 웹 사이트에 typeahead-no-results="noResults" 지시문이 표시됩니다. 그런 다음 글리프콘과 메시지 "No Results Found"가 표시된 <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>