Я работаю над приложением .NET MVC, в котором есть некоторые страницы AngularJS. Я пытаюсь использовать Bootstrap UI Typeahead, но он работает неправильно.AngularJS Bootstrap UI Typeahead не работает должным образом с пользовательским шаблоном всплывающих окон
Если я начинаю набирать в текстовое поле автозаполнения всплывающее окно открывается с потенциальными матчей:
Однако, если я нажму на одном из матчей ничего не происходит, и основная угловая модель не обновляется:
действительно странно, что, если я ударил вкладку в то время как всплывающее окно, открыт первый матч будет выбран и угловая модель обновляется ар propriately:
Это шаблон я использую:
<script type="text/ng-template" id="customTemplate.html">
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0">
<ul>
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
</ul>
</div>
Это отношение передний конец кода:
<section class="mos intro" data-ng-controller="MosConverterController as vm">
<div>
<form ng-submit="GetCareers()" class="form form--mos">
<div class="form__row">
<div class="form__col form__col--half-plus">
<label for="MOS" class="form__label">MOS/Rate/Duty Title</label>
<input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required>
<div>Current Search Term: {{vm.model.SearchTerm}}</div>
<textarea>{{vm.model.CareerResults}}</textarea>
</div>
</div>
</form>
</div>
Вот наша угловая модель. Обратите внимание, что мы используем машинопись в этом проекте:
import {MosConverterSearchResult} from "../models";
export class MosConverterModel implements Object {
SearchTerm: string = null;
CareerResults: MosConverterSearchResult[];
SelectedCareer: MosConverterSearchResult;
}
Я последовал за учебник из документации Угловой Bootstrap here для «пользовательских шаблонов для всплывающих машинописного в раскрывающемся списке» раздела, но я не могу понять, что я делать неправильно. Я уверен, что это что-то простое, но я просто не могу понять. Следует отметить, что добавление ng-click к элементу li, как в руководстве, не устраняет проблему. Я пробовал, как это раньше:
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>