角度材質對話框：將焦點設置在第一項上

Question

我在材質設計中使用了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