Sunday, 7 June 2015

angularjs input enter to submit (on a nav bar)


if you want to implement a search bar on nav bar:


you should do


    <div class="header" ng-controller="NavCtrl">
      <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#/">Flickr Client</a>
          </div>

            <form class="navbar-form" role="search" ng-submit="search()">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search Filckr tags" name="srch-term" id="srch-term" ng-model="criteria">
                <div class="input-group-btn">
                  <button class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                </div>
              </div>
            </form>

        </div>
      </div>
    </div>
First you need the form, otherwise it will display like this:



Second the form also benefit us a lot:

1, input box enter to submit.
2, button click to submit.

All done by ng-submit:

<form class="navbar-form" role="search" ng-submit="search()">

Side-effects:

Any buttons in this form can trigger the submission, if you want to have a button without submission ability, you should do like this:

<button class="btn btn-default" type="button">just a button.</button>








No comments:

Post a comment