Angularjs，专注于表格中的输入

我在每个单元格中都有一个输入表格，我可以通过单击按钮将记录添加到该表格。我想专注于创建的最后一条记录的第一个输入。我不知道这是可能的。如果有人可以帮助我在此...Angularjs，专注于表格中的输入

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

<!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>

来源

2015-03-31 user1260928

看看[这个问题]（http://stackoverflow.com/questions/14833326/how在设置焦点上的输入字段），我认为它基本上做你想要的。你可以在'ng-repeat'中使用'$ last'属性来检测是否设置焦点。 – 2015-03-31 15:51:07

是的，很容易可行的一个指令：

我的例子与您的代码：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>

来源

2015-03-31 15:51:59 SoluableNonagon

看起来像一个不错的解决方案，但是...我从模态中添加表格中的元素。当模式显示时，由于该指令被调用了很多次，后面的表格会冻结。我不能在plunkr中重现这种行为。所以我想这个问题是特定于我的项目。 – user1260928 2015-04-01 07:59:26

冻结可能仅仅是由于观察者和一次插入大量html到DOM中。简单的解决方案是使用vanilla JS查找最后一行，并在每次添加时关注第一个输入。这样你完全绕过指令。但是这不会真的加速你的代码，它会在每次添加代码时将焦点放在最后一个元素上。可以通过在焦点上创建超时来缓解。但是，ng-repeat与大量数据和观察者是真正的敌人。 – SoluableNonagon 2015-04-01 15:21:32

试试这种方法。

控制器

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

来源

2015-03-31 15:56:52

看来我不能在我的控制器中注入$元素，我得到一个未知的提供者：$ elementProvider < - $元素错误 – user1260928 2015-04-01 07:22:23

这适用于我...您需要添加'$元素'作为依赖控制器。谢谢！ – bostonsqd 2017-06-07 15:47:57

Angularjs，专注于表格中的输入

回答

相关问题