入力要素のオートフォーカスon角度

Question

[nameフィールド]、[int、string、boolean]のタイプの選択と同じフィールドを持つ新しいレコードを作成するためのボタンを含むレコードを動的に追加するフォームを持っています。デフォルトでは、ng-repeatで発生する新しく作成された行のボタン要素にフォーカスが適用されます。フォーカスを名前入力フィールドに適用したいのですが、フォーカスを適用するaddNewParam関数内でこれを試しました：element($event.currentTarget).parent().parent().find('[name="new-input-param"] input')[0].focus();。誰かが私にこれをやるより良い方法を提案することができますか？

function addNewParam($event, newParam) { 
if (!newParam.name) { 
    wmToaster.show('error', $rs.locale.MESSAGE_ERROR_TITLE, Utils.replace($rs.locale.MESSAGE_WARN_NAME_EMPTY_DESC, ['Param'])); 
} else { 
Toaster.hide(); 
$s.pageParams.push(newParam); 
$s.newParam = {'name': '', 'type': 'string'}; 
$s.onPageParamsUpdate(); 
element($event.currentTarget).parent().parent().find('[name="wm-new-input-param"] input')[0].focus(); 
} 

}

Answer 1

オートフォーカス itslefがjob.Justがにこのカスタムディレクティブを追加することが可能です。ここでは、テーブルここ

<table class="table property-value"> 
<tbody> 
    <tr> 
     <th class="ng-binding">Name</th> 
     <th class="ng-binding">Type</th> 
     <th>&nbsp;</th> 
    </tr> 
    <!-- ngRepeat: param in pageParams track by $index --><tr ng-repeat="param in pageParams track by $index" class="ng-scope"> 
     <td name="input-param-name"> 
      <input class="form-control app-textbox app-widget-wrapper ng-pristine ng-untouched ng-valid ng-not-empty" name="input-param-name-name" type="text" placeholder="parameter name" ng-model-options="{updateOn: 'blur'}" ng-model="param.name" ng-change="onPageParamsUpdate()"> 
     </td> 
     <td> 
      <select name="input-param-type-name" class="form-control app-select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="param.type" ng-options="val for val in pageParamTypes.split(',')" ng-change="onPageParamsUpdate()"><option label="string" value="string:string" selected="selected">string</option><option label="integer" value="string:integer">integer</option><option label="boolean" value="string:boolean">boolean</option><option label="date" value="string:date">date</option></select> 
     </td> 
     <td> 
      <button name="webservice-remove-param" class="app-button" ng-click="addNewParam($event, newParam)"> 
       <i class="glyphicon16 glyphicon glyphicon-plus"></i> 
      </button> 
     </td> 
    </tr><!-- end ngRepeat: param in pageParams track by $index --> 
</tbody> 
</table> 

のDOM構造はaddNewParam機能ですあなたのアプリ。

app.directive('autoFocus', function($timeout) { 
 
    return { 
 
     restrict: 'AC', 
 
     link: function(_scope, _element) { 
 
      $timeout(function(){ 
 
       _element[0].focus(); 
 
      }, 0); 
 
     } 
 
    }; 
 
});

使用方法は次のとおりです。

<input name="theInput" auto-focus> 

より多くのオプションのためにHow to set focus on input field?を参照してください。