2017-04-21 13 views
0

私は、この例から取られた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の答えで)それは私のために働かないのですか?

ありがとう!!!!!!

答えて

1

私はこのようなカスタムテンプレートが含まれているためにあなたのinputを変更:

テンプレートは、このようなものになります
<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"> 

:あなたは私を提供するように私はStatesを使用している

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

注意をカスタムテンプレートが理に適ったらいいと思います。

ここでは、好きなように動作するforked codepenがあります。私が持っているpre表示のみ番号が含まれ、その下にng-model、全体ではない(4を言う)4 - <State>

EDIT:またはより良い、あなたはまだinput状態名を表示することができますし、で(単にインデックスを使用selected.Index)。それのためにSample codepen

+0

@tanmayありがとうございました。あなたの提案はエントリを正しく示し、インデックスを正しく返しますが、インデックスと値の組み合わせを使用することはできません。見る? ** Index **の部分を入力することも可能でなければならないので、** 1 **と入力するとリストがAlabama、Georgia、Hawaii、...、Illinoisの項目で開くようにする必要があります。 – FDavidov

+1

美しい!もちろん投票された。ありがとう!!!! – FDavidov

+0

私はあなたの例(フォークコードド)をそのまま(または私が信じる)それを取ったが、それはまだ私のためには動作しません。私は自分の質問を編集し、ソースHTMLとJSを追加しました。あなたが見て私が間違ってそれをコピーすることができるかどうか私に知らせることができれば大いに感謝しますか? – FDavidov

関連する問題