ブートストラップのnavbar検索ボックスを作成する

Question

私はクエリのパラメータをURLに直接入力すると機能する検索機能を作ろうとしていますが、検索からそれを選択する方法を知らないそれを実行します。私はng-modelを使ってテキスト自体をコントローラにマップしましたが、実行は機能しません。

ナビゲーションバーのフォーム：私は手動でそれを実行し、その検索自体があるときところで

<form ng-submit="doSearch()" class="navbar-form"> 
    <div class="form-group" style="display:inline;"> 
     <div class="col-md-offset-4 input-group" style="display:table;"> 
      <input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text"> 
       <span class="input-group-addon" style="width:1%;"> 
        <span class="glyphicon glyphicon-search"></span> 
       </span> 
     </div> 
    </div> 

、私のdoSearch（）機能が正常に動作します。私はまた、search.textが来ることを検証しました。ユーザがクリックするかenterを押すと、アイコン（glyphicon-search）を実行するにはどうすればよいかと思います。ng-submit = "doSearch（）"

ご迷惑をおかけして申し訳ありません。私は常に物事のバックエンド側にいましたので、HTMLとAngularの新しいものです。

おかげ

Answer 1

これは最終的に機能しました。まず、動作する適切なHTML：

<form ng-submit="doSearch()" class="navbar-form"> 
<div class="form-group" style="display:inline;"> 
    <div class="col-md-offset-4 input-group" style="display:table;"> 
     <input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text"> 
      <span ng-click="doSearch()" class="input-group-addon" style="width:1%;"> 
       <span class="glyphicon glyphicon-search"></span> 
      </span> 
    </div> 
</div> 
</form> 

さらに、コントローラに接続していないビューに問題がありました。実際には、コントローラーに接続していましたが、ページ全体が読み込まれ、テストのためにconsole.log（「読み込んでいます」）がそこに置かれていたときに限り、コントローラに接続していました。だから私は "私は積んで"見たとき、私はコントローラが正常に呼び出されたと思った。

しかし、doSearch（）は角度ルーティング経由で接続していたコントローラにあったため、ng-Viewは正しいコントローラに接続していませんでした。

これは誰にも意味があるのか​​どうかはわかりませんが、他の誰かが私のような問題に遭遇した場合に備えて書いています。

私はもともと思っていたように、この問題を要約するのはHTMLではありませんでした。 ng-submit（enterを押したときにフォームを提出する）とng-click（グリフコンをクリックする）はそのトリックを行います。

Answer 2

あなたは、代わりに<span>の<button>要素内にアイコンを配置フォームフィールドにそれを統合するために、CSSのビットを微調整することができます。入力した上で検索をトリガーに関しては

、このようなjQueryの何かを使用することができると：

$('input').keypress(function (e) { 
var key = e.which; 
if(key == 13) // the enter key code 
    { 
    doSearch(); 
    } 
}); 

Answer 3

あなたはそのボタンをクリックするとと等価であることを指定するには、検索アイコン <span class="glyphicon glyphicon-search"></span> 前<button type="submit">を使用してみましたそのフォームの送信イベント。