0

私はいくつかのAngularJSページを持つ.NET MVCアプリケーションを開発中です。 Bootstrap UI Typeaheadを使用しようとしていますが、正しく動作していません。AngularJS Bootstrap UI Typeaheadがカスタムポップアップテンプレートで正しく機能しない

私はオートコンプリートのポップアップが潜在的な試合で開きテキストボックスに入力し始める場合:私は何も起こらないと根本的な角度のモデルが更新されない試合のいずれかをクリックした場合、

enter image description here

ただしました:

enter image description here

本当に奇妙なことは、私はタブをヒットした場合、ポップアップが開いている間に最初のマッチが選ばれますと、角モデルが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> 

これは、関連するフロントエンドのコードです:

enter image description here

これは私が使用しているテンプレートがあります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> 

答えて

0

:私は前にこのようにそれを試してみました。上記のチュートリアルのリンクの例では、ng-showが使用されています。 ng-ifは、DOM要素を破棄し、プロセス内のスコープを破棄します。だから、リストからアイテムをクリックしたときに何も起こらないのです。これが本当にそうだった場合、なぜタブ動作がうまくいくのか分かりません。誰かが知っている場合は、コメントまたはより良い回答を追加してください。

関連する問題