私は、この例から取られたworkingheadhead要素をに入れました。非常に単純で完全に機能します。構造化された値を持つAngularJS先読み
私の問題は、私が扱う必要のあるデータは実際には{"Index":"<Index>","Value":"<Name>"}
のような2つのデータ要素を持っていることです。
<index> - <Name>
のような文字列を提示し、ユーザがインデックスおよび/または値の一部を含む任意の組み合わせのいずれかを入力できるようにすると、選択すると、インデックスが(これはユニークだけ
でのみ維持する必要があり リストの一部)。
は私がに、上記の例では、リストを修正: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"}] ' ) ;
とにHTMLを設定します。仕事をしていません
<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">
。
先行入力リスト内のエントリは次のようになります、要約すると:(
1 - Alabama
2 - Alaska
...
、ユーザーがエントリ(最初の1と言う)を選択した場合に、スクリプト内で受信した値が「1」であるべきで、 「1 - アラバマ」ではなく)。
ご協力いただければ幸いです。
EDIT:
私はTO-ONE-ONEを下回っtanmayによって提案されたコードを実装して、何とか、それは私のために働いていません。 6 - Colorado
を取得する代わりに、-
しか取得できません。数字(インデックス)も状態名も意味しません。興味深いことに、表示されるオプションの数は、私が入力したものと一致します(つまり、m
と入力すれば、Alabamaに対応する-
のレコードしか得られません)。ここで
は全体のHTMLとJSファイルです:
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;
});
誰かが私は例のコードをコピーできるか(参照を教えてもらえリンクはtanmayの答えで)それは私のために働かないのですか?
ありがとう!!!!!!
@tanmayありがとうございました。あなたの提案はエントリを正しく示し、インデックスを正しく返しますが、インデックスと値の組み合わせを使用することはできません。見る? ** Index **の部分を入力することも可能でなければならないので、** 1 **と入力するとリストがAlabama、Georgia、Hawaii、...、Illinoisの項目で開くようにする必要があります。 – FDavidov
美しい!もちろん投票された。ありがとう!!!! – FDavidov
私はあなたの例(フォークコードド)をそのまま(または私が信じる)それを取ったが、それはまだ私のためには動作しません。私は自分の質問を編集し、ソースHTMLとJSを追加しました。あなたが見て私が間違ってそれをコピーすることができるかどうか私に知らせることができれば大いに感謝しますか? – FDavidov