Ich habe ein funktionierendes typeahead Element aus dem Beispiel in here, sehr einfach und funktioniert perfekt.AngularJS Typeahead mit strukturierten Werten
Jetzt ist mein Problem, dass die Daten, die ich behandeln muss in der Tat zwei Datenelemente, etwa {"Index":"<Index>","Value":"<Name>"}.
Ich brauche eine Zeichenfolge wie <index> - <Name> innerhalb der Liste zu präsentieren, kann der Benutzer entweder eine beliebige Kombination einschließlich Teile des Index und/oder Wert und bei Auswahl geben, halten nur den Index (dies ist die einzige einzigartige Teil der Liste).
I modifiziert, um die Liste in dem oben genannten Beispiel:
var States = JSON.parse('[{"Index":"1","Value":"Alabama"}, ' +
'{"Index":"2","Value":"Alaska"}, ' +
'{"Index":"3","Value":"Arizona"}, ' +
'{"Index":"4","Value":"Arkansas"}, ' +
'{"Index":"5","Value":"California"}, ' +
'{"Index":"6","Value":"Colorado"}, ' +
'{"Index":"7","Value":"Connecticut"}, ' +
'{"Index":"8","Value":"Delaware"}, ' +
'{"Index":"9","Value":"Florida"}, ' +
'{"Index":"10","Value":"Georgia"}, ' +
'{"Index":"11","Value":"Hawaii"}, ' +
'{"Index":"12","Value":"Idaho"}, ' +
'{"Index":"13","Value":"Illinois"}] ' ) ;
und stellen Sie den HTML-Code:
<input name="states"
id="states"
type="text"
placeholder="enter a state"
ng-model="selected"
value="(state.Index)"
typeahead="(state.Value) for state in states | filter:$viewValue | limitTo:8"
class="form-control">
, die nicht den Job tut.
Um es zusammenzufassen, Einträge in der typeahead Liste sollte wie folgt aussehen:
1 - Alabama
2 - Alaska
...
und wenn der Benutzer einen Eintrag auswählt (sagen die erste), der Wert innerhalb des Skripts erhalten sollte „1“ sein (und nicht "1 - Alabama").
Jede Hilfe würde am meisten geschätzt werden.
EDIT:
I umgesetzt ONE-TO-ONE der von Tanmay vorgeschlagen nachfolgenden Code und irgendwie ist es nicht für mich arbeiten. Anstatt beispielsweise (6 - Colorado) zu bekommen, erhalte ich nur eine -, was bedeutet, dass keine Nummer (Index) oder kein Staatsname ist. Interessanterweise stimmt die Anzahl der angezeigten Optionen mit dem überein, was ich eingegeben habe (das heißt, wenn ich m gebe, erhalte ich nur ne Aufzeichnung mit -, die Alabama entsprechen würde).
Hier sind die ganzen HTML und JS-Dateien:
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="with=device-width initial-scale=1.0">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<title>MyTest - Partial</title>
<script src="Public_Libs/JQuery/jquery.js"></script>
<script src="Public_Libs/Bootstrap/js/bootstrap.min.js"></script>
<script src="Public_Libs/Bootstrap/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap-select.min.css">
<link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap-theme.min.css">
<script src="Public_Libs/Angular/angular.min.js"></script>
<script src="Public_Libs/Angular/angular-route.min.js"></script>
<script src="Public_Libs/Angular/angular-sanitize.min.js"></script>
<script src="Public_Libs/Angular/angular-ui-bootstrap.min.js"></script>
<script src="Index_Controller.js"></script>
</head>
<body>
<div ng-app="angularTypeahead">
<script type="text/ng-template" id="customTemplate.html">
<a>
<span bind-html-unsafe="match.label.Index | typeaheadHighlight:query"></span> -
<span bind-html-unsafe="match.label.Value | typeaheadHighlight:query"></span>
</a>
</script>
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular.js Typeahead</h2>
<div class="form-group">
<label for="states">Search for US States</label>
<input name="states" id="states" type="text"
typeahead-template-url="customTemplate.html"
placeholder="enter a state" ng-model="selected"
typeahead="state.Index as state for state in states | filter:$viewValue | limitTo:8"
class="form-control">
</div>
<pre>{{selected}}</pre>
<button class="btn btn-success" type="submit">Submit</button>
</div>
</div>
</body>
</html>
JS:
// https://angular-ui.github.io/
// setup app and pass ui.bootstrap as dep
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
// define factory for data source
myApp.factory("States", function() {
var states = JSON.parse('[{"Index":"1","Value":"Alabama"}, ' +
'{"Index":"2","Value":"Alaska"}, ' +
'{"Index":"3","Value":"Arizona"}, ' +
'{"Index":"4","Value":"Arkansas"}, ' +
'{"Index":"5","Value":"California"}, ' +
'{"Index":"6","Value":"Colorado"}, ' +
'{"Index":"7","Value":"Connecticut"}, ' +
'{"Index":"8","Value":"Delaware"}, ' +
'{"Index":"9","Value":"Florida"}, ' +
'{"Index":"10","Value":"Georgia"}, ' +
'{"Index":"11","Value":"Hawaii"}, ' +
'{"Index":"12","Value":"Idaho"}, ' +
'{"Index":"13","Value":"Illinois"}] ' ) ;
return states;
});
// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope, States) {
$scope.selected = undefined;
$scope.states = States;
});
Könnte mir jemand sagen, wie kann ich den Code des Beispiels kopieren (siehe Link in Tanmays Antwort) so dass es für mich nicht funktioniert?
Danke !!!!!!
Danke @tanmay für Ihre Antwort. Ihr Vorschlag zeigt Einträge korrekt an und gibt den Index korrekt zurück, erlaubt jedoch keine Kombination aus Index und Wert. Sehen? Ich brauche, dass es auch möglich sein sollte, den ** Index ** Teil zu tippen, so dass, wenn ich ** 1 ** schreibe, die Liste mit Einträgen Alabama, Georgia, Hawaii, ..., Illinois geöffnet wird. – FDavidov
Schön !!! Natürlich abgestimmt. Vielen Dank!!!! – FDavidov
Ich nahm Ihr Beispiel (gegabelter Codepen) AS-IS (oder so glaube ich) und es funktioniert immer noch nicht für mich. Ich bearbeitete meine Frage und fügte die Quelle HTML und JS hinzu. Ich würde es sehr schätzen, wenn du einen Blick darauf werfen könntest und mich wissen lässt, wie ich es falsch kopieren könnte. – FDavidov