私はいくつかのAngularJSページを持つ.NET MVCアプリケーションを開発中です。 Bootstrap UI Typeaheadを使用しようとしていますが、正しく動作していません。AngularJS Bootstrap UI Typeaheadがカスタムポップアップテンプレートで正しく機能しない
私はオートコンプリートのポップアップが潜在的な試合で開きテキストボックスに入力し始める場合:私は何も起こらないと根本的な角度のモデルが更新されない試合のいずれかをクリックした場合、
ただしました:
本当に奇妙なことは、私はタブをヒットした場合、ポップアップが開いている間に最初のマッチが選ばれますと、角モデルがAPに更新されていることですpropriately:
<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>
:
<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>
これは、関連するフロントエンドのコードです:
これは私が使用しているテンプレートがあります210
ここに私たちの角形モデルがあります。私たちはこのプロジェクトで活字体を使用していることに注意してください:
import {MosConverterSearchResult} from "../models";
export class MosConverterModel implements Object {
SearchTerm: string = null;
CareerResults: MosConverterSearchResult[];
SelectedCareer: MosConverterSearchResult;
}
私はセクション「先行入力のドロップダウンのためのカスタムポップアップテンプレート」の角度ブートストラップドキュメントhereからチュートリアルに続くが、私は私は何を把握することはできません間違っている。私はそれが何かシンプルだと確信していますが、私はそれを理解できません。チュートリアルのようにli
要素にng-click
を追加しても問題は解決しないことに注意してください。私は問題が私のテンプレートでng-if
だった考え出した時間のカップルのための私の机のに対して私の頭を叩いた後
<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>