角材ダイアログ：最初の項目にフォーカスを設定

Question

私はMaterial DesignでAngular 1.5.xを使用しています。ダイアログが表示されたら最初の入力フィールドを選択するカスタムダイアログボックスがあります。

どうすればよいですか？

私は一緒に問題の実際の例を入れている：ここで https://codepen.io/anon/pen/xdoqmZ?editors=1010

はコードです。

$mdDialog.show({ 
    parent: parentEl, 
    targetEvent: $event, // determines source location of the dialog 
    template: 
      ' <md-dialog>' + 
     ' <md-content>Hello {{ username }}!</md-content>' + 
     ' <div class="md-actions">' + 
     '  <form>' + 
     '  <div>Given names: <input /></div>' + 
     '  <div>Surname: <input /></div>' + 
     '  <div>Address: <input /></div>' + 
     '  <div>Building: <input /></div>' + 
     '  <div>Level: <input /></div>' + 
     '  <div>Street: <input /></div>' + 
     '  <div>Suburb: <input /></div>' + 
     '  <div>Postcode: <input /></div>' + 
     '  <div>Country: <input /></div>' + 
     '  <div>State: <input /></div>' + 
     '  <div>ABN:  <input /></div>' + 
     '  <div>' + 
     '   <md-button ng-click="closeDialog()">' + 
     '   Close Greeting' + 
     '   </md-button>' + 
     '  </div>' + 
     '  </form>' + 
     ' </div>' + 
     ' </md-dialog>', 
    onComplete: onCompleteAnimation, 
    locals: { 
     name: $scope.username 
    }, 
    controller: DialogController 
    }); 

この例では、指定名に焦点を当てたダイアログが表示されます。

Answer 1

onCompleteAnimation関数で最初の入力を見つけ、集中

onComplete: function(s,e) { 
     $(e).find('input').first().focus() 
    }, 
    locals: { 
     name: $scope.username 
    }, 
    controller: DialogController 

https://codepen.io/anon/pen/ZKgWjQ?editors=1010