CODEWITHSUNDEEP
angularjsasp.net-mvctypescriptangular-ui-bootstrapangular-ui-typeahead
Bruno
Bruno

Reputation: 563

AngularJS Bootstrap UI Typeahead Not Working Properly with Custom Popup Template

I'm working on a .NET MVC application that has some AngularJS pages in it. I'm trying to use Bootstrap UI Typeahead but it's not quite working properly.

If I start to type in the textbox the autocomplete popup opens with potential matches:

enter image description here

However, if I click on one of the matches nothing happens and the underlying angular model is not updated:

enter image description here

The really strange thing is that if I hit tab while the popup is open the first match will get selected and the angular model is updated appropriately:

enter image description here

This is the template I'm using: 

<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>

This is the relevant front-end code: 

<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>

Here's our angular model. Note that we're using Typescript in this project: 

import {MosConverterSearchResult} from "../models";

export class MosConverterModel implements Object {
    SearchTerm: string = null;
    CareerResults: MosConverterSearchResult[];
    SelectedCareer: MosConverterSearchResult;
}

I followed the tutorial from the Angular Bootstrap documentation here for the "Custom popup templates for typeahead's dropdown" section but I can't figure out what I'm doing wrong. I'm sure it's something simple but I just can't figure it out. I should note that adding ng-click to the li element like they have in the tutorial doesn't fix the issue. I've tried it like this before: 

        <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>

Upvotes: 0

Views: 955

Answers (1)

Bruno
Bruno

Reputation: 563

After banging my head against my desk for a couple of hours I figured out the issue was the ng-if in my template. The example in the tutorial link I posted above uses ng-show. ng-if destroys the DOM element and destroys its scope in the process. That's why nothing would happen when I clicked on an item from the list. Not sure why the tabbing would work though if this was indeed the case. If anyone knows please add a comment or better answer.

Upvotes: 0

Related Questions