ionic 1 처음 입력 값을 입력하는 방아쇠를 당기는 방법

Question

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