ionic 1入力を最初に入力する値を入力する方法

Question

私はイオン1を使用しています。私は2つの入力フィールドを持つ1つの画面を持っています。だから、ユーザーがその画面に来るたびに。私の最初の入力フィールドは自動的に起動し、ユーザーは値を入力する必要があります。

は、...！これまでユーザーが私の画面に来ると、強制的にユーザーまたは強制的にカーソルを最初の入力フィールドに表示して値を入力する必要があります。

どうすれば実現できますか？

ここに私のコード：事前に

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

おかげで1

Answer 1

あなたがフォーカスを設定するためのangular-autofocusを使用することができます！。

モジュールmp.autoFocusをアプリモジュールに追加してスクリプトをロードするだけです。次に、auto-focusを属性として最初の入力にフォーカスを設定することができます。

以下のデモまたは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/angular-auto-focus@1.0.4"></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>