ionic 1 how to trigger input filed first to enter value

Question

I am using ionic 1. In that i have one screen with two input fields. So whenever user come to that screen. My very first input field should automatically trigger and user have to type the value.

means that ...! When ever user come to my screen , it force user or automatically that blinking cursor should show in my first input fiels to enter value.

How can i achieve that ?

here my code :

 <div class="col-sm-8" style="border: 0.01px #696969 solid;
    border-radius: 7px;margin-right: 16px;">
              <input type="text" id="origin" placeholder="Type Your Location" class="form-control" ng-model="directions.origin" />
            </div>

Thanks in advance !1

Answer 1

You can use angular-autofocus for setting focus.

Just add the module mp.autoFocus to your app module and load the script. Then you can set the focus on the first input with auto-focus as attribute.

Please have a look at the demo below or this fiddle.

angular.module('demoApp', ['ionic', 'mp.autoFocus'])
  .controller('mainController', MainController)
  .config(routes);


function MainController() {}

function routes($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      template: '<div>home route</div>'
    })
    .state('input', {
      url: '/input',
      template: '<div>First input: <input auto-focus ng-model="main.firstText"/>{{main.firstText}}</div>'
    });

  $urlRouterProvider.otherwise('/');
}

<link href="https://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<script src="https://code.ionicframework.com/1.3.3/js/ionic.bundle.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div ng-app="demoApp" ng-controller="mainController as main">
  <ion-side-menus>

    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <button class="button ion-navicon-round" menu-toggle="left">
      </button>
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
        <ui-view></ui-view>
      </ion-content>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <a class="button" href="#/">Home</a>
          <a class="button" href="#/input">Input</a>
        </ion-list>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>
</div>