Question

我在每个单元格中都有一个输入表，我可以通过单击按钮向该表添加记录。我想将焦点放在最后创建的记录的第一个输入上。我不知道这是否可能。如果有人可以帮我这个......

＆＃13;

function Ctrl($scope) {
  $scope.adresses = [];
  
  $scope.add = function() {
    var adr = {ville:null, codePostal:null}
    $scope.adresses.push(adr);
  };
  
}

＆＃13;

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body>

<div ng-controller="Ctrl" >
  <button ng-click="add()"> Add </button>
  <table>
    <tr>
      
      <th>ville</th>
      <th>adresse</th>
    <tr>
    
    <tr ng-repeat="adresse in adresses">
      <td>
       <input ng-model="adresse.ville"/>
      </td>
      <td>
       <input ng-model="adresse.codePostal"/>
      </td>
      
     
    <tr>
  </table>
  
</div>






  </body>
</html>

＆＃13;

Answer 1

尝试这种方法。

<强>控制器

controller('AppCtrl', function ($scope, $timeout, $element) {
  $scope.adresses = [];

  $scope.add = function() {
    var adr = {ville:null, codePostal:null}
    $scope.adresses.push(adr);

    $timeout(function () {
      $element[0].querySelector('[is-last=true]').focus();
    })
  };
});

<强>标记

<input ng-model="adresse.ville" is-last="{{$last}}"/>

Working Plnkr

Answer 2

是的，很容易使用指令：

我的代码示例：http://plnkr.co/edit/aDNdjjBKZHVfTXnLy2VZ?p=preview

// the directive I use
.directive('focusOnMe', ['$timeout', '$parse',
        function($timeout, $parse) {
            return {
                //scope: true,   // optionally create a child scope
                link: function(scope, element, attrs) {
                    var model = $parse(attrs.focusOnMe);
                    scope.$watch(model, function(value) {
                        // console.log('value=',value);
                        if(value === true) {
                            $timeout(function() {
                                element[0].focus();
                            });
                        }
                    });
                }
            };
        }
]);

HTML：焦点的条件是一个布尔值，这里是元素是否是最后一个。因此，每次添加新行时，都会重新评估条件并分配焦点。

<td>
       <input ng-model="adresse.ville" focus-on-me="$last"/>
</td>

Angularjs，专注于表中的输入

2 个答案: