ionic 1 如何触发输入字段首先输入值答案

【问题标题】：ionic 1 how to trigger input filed first to enter valueionic 1 如何触发输入字段首先输入值
【发布时间】：2017-05-20 19:59:25
【问题描述】：

我正在使用 ionic 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

【问题讨论】：

标签： angularjs ionic-framework hybrid-mobile-app input-field

【解决方案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>

【讨论】：