Wie Zugriff auf Controller-Wert in benutzerdefinierten Typ-Ahead-Vorlagen

Question

Ich habe Scope-Werte in controller.I müssen Scope-Werte in benutzerdefinierten Typ Ahead-Vorlage anzeigen.

Die benutzerdefinierte Vorlage kann jedoch nicht auf die Controller-Werte zugreifen, die immer leer angezeigt werden.

In meinem Szenario muss ich "scope.names" in benutzerdefinierten Vorlagen anzeigen. aber es zeigt leer.

So zeigen Sie die Controllerwerte in benutzerdefinierten Vorlagen an.

HTML:

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl"> 
    <h4>Custom popup templates for typeahead's dropdown</h4> 
    <pre>Model: {{customPopupSelected | json}}</pre> 
    <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control"> 
</div> 

DEMO:

https://plnkr.co/edit/HEf0lipdBP5ZyuciQsDo?p=preview

Answer 1

Sie tatsächlich eine Diskrepanz in der JSON-Struktur von $scope.names mit und was die uib-typeahead Vorlage erfordert. Ich änderte das names Feld, um der Strukturvorlage zu entsprechen erfordert wie folgt .. und es funktioniert. Wenn Sie anders herum arbeiten möchten, können Sie das Array beibehalten und Änderungen an der Vorlage vornehmen.

$scope.names=[{ 
    name: "Alabama" 
}, { 
    name: "Alaska" 
}, { 
    name: "Arizona" 
}]; 

working plnkr