Textwert wird nicht angezeigt, wenn das Element mit Hilfe von typeahead ausgewählt wurde

Ich verwende typeahead in meinem angularjs-Projekt.Textwert wird nicht angezeigt, wenn das Element mit Hilfe von typeahead ausgewählt wurde

ich diesen Wert hava mit typeahead Attribute in Textfeld angezeigt werden:

$scope.cities = [{id:1,address:'Berlin'}, 
        {id:2,address:'Bonn'}, 
        {id:3,address:'London'}, 
        {id:4,address:'Miami'}];

Und hier ist Texteingabefeld mit typeahead Attribute:

<input type="text" ng-model="selected" typeahead="state.abbreviation as state.name for state in states | filter:$viewValue | limitTo:8">

aber das Problem, dass, wenn Element ausgewählt ist die ID des angezeigten Wertes und nicht die Adresse.

Hier ist die planker.

Ich möchte die Adresse in Textfeld angezeigt werden und ID-Wert in selected Variable speichern.Wie beheben Sie das Problem?

Quelle

2016-05-10 Michael

sehen diese Antwort http://stackoverflow.com/questions/15930339/how-to-tie-angular-uis- typeahead-mit-einem-Server-via-http-für-Server-Seite-optimi –

Versuchen Sie dieses (run-Code-Snippet):

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) { 
 

 
    $scope.cities = [{id:1, address:'Berlin'}, 
 
\t \t \t \t \t \t \t {id:2,address:'Bonn'}, 
 
       {id:3,address:'London'}, 
 
       {id:4,address:'Miami'}]; 
 
       
 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<style> 
 
    .typeahead-demo .custom-popup-wrapper { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    z-index: 1000; 
 
    display: none; 
 
    background-color: #f9f9f9; 
 
    } 
 

 
    .typeahead-demo .custom-popup-wrapper > .message { 
 
    padding: 10px 20px; 
 
    border-bottom: 1px solid #ddd; 
 
    color: #868686; 
 
    } 
 

 
    .typeahead-demo .custom-popup-wrapper > .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    display: block; 
 
    min-width: 160px; 
 
    background-color: transparent; 
 
    border: none; 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
    } 
 
</style> 
 

 
<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl"> 
 

 
    <h4>Custom templates for results</h4> 
 
    <pre> Id: {{city.id}}</pre> 
 
    <pre>Model: {{city | json}}</pre> 
 
    
 
    <input type="text" 
 
    ng-model="city" 
 
    placeholder="Custom template" 
 
    
 
    uib-typeahead="city as city.address for city in cities | filter:$viewValue" 
 
    class="form-control" 
 
    typeahead-show-hint="true" 
 
    typeahead-min-length="0"/> 
 
    
 
    </div> 
 
    </body> 
 
</html>

Quelle

2016-05-10 08:29:25 Bettimms

Dies ist nicht die Lösung, die Sie suchen ?! – Bettimms

Ja. Vielen Dank! – Michael

Bitte upvote es nur, um die -1-Stimme zu entfernen, die auf die Antwort erhalten wurde! Danke – Bettimms

Textwert wird nicht angezeigt, wenn das Element mit Hilfe von typeahead ausgewählt wurde

Antwort

Verwandte Themen