Question

我希望在我的页面加载时自动对焦ngRepeat内的第一个输入，当我向数组添加新项目时，焦点应该转到ngRepeat的最后一项，依此类推，不要＆＃ 39;无论我添加了多少项目。

这是我的代码：

<div class="add-top" ng-show="showstep=='step2'" style="position:relative;width:100%;">
  <form name="EmailForm" novalidate accessible-form autocomplete="off" ng-submit="checkDup() &&  EmailForm.$valid ? Add() :''">
    <div class="white text-center ">
      <!-- && (emailDel | filter:'':true).length == emailDel.length -->
      <div class=" bg-color-upload03 ticket-top">
        <div class="col-md-12 " ng-init="emailDel=[1]">
          <div class="newevent-nav01">
            Enter email ids</div>
          <div class="col-md-6 col-md-offset-3" ng-repeat="e in emailDel track by $index">

            <input type="email" class="text-left" placeholder="Email ID" validate-email ng-model="emailDel[$index]" ng-init="emailDel[$index]=''" ng-required="emailDel.length==1" name="email_{{$index}}" id="email_{{$index}}">

            <div class="col-md-2 col-md-offset-10 text-left" style="margin-top: -10px;" ng-show="(emailDel.length-1)==$index">

              <img src="../../../path to + symbol-active icon" width="40%" ng-hide="(EmailForm.$valid && emailDel[ds.emailDel.length-1] !='')" />

              <img src="../../..path to +symbol gray icon" width="40%" class="cursor-poi" ng-click="(EmailForm.$valid && emailDel[emailDel.length-1] !='') ? emailDel.push(emailDel.length+1) :''" ng-show="(EmailForm.$valid && emailDel[emailDel.length-1] !='')" />

            </div>
            <div class="col-md-12">
              <span class="error" ng-show="EmailForm['email_'+$index].$touched && !EmailForm['email_'+$index].hasFocus">
                          <span ng-show="EmailForm['email_'+$index].$error.required">
                          Required
                          </span>
              <span ng-show="EmailForm['email_'+$index].$error.email">
                          Invalid Email
                          </span>
              <span ng-show="emailDel[$index]!='' && (emailDel | filter:emailDel[$index]:true).length>1">
                              Duplicate Email
                          </span>
              </span>
            </div>
          </div>
        </div>

        <div class="col-md-4 col-md-offset-4">
          <div class="col-md-10 col-md-offset-1">
            <button type="submit" class="btn" ng-disabled="EmailForm.$invalid || (emailDel.length>1 && (emailDel | filter:'':true).length==emailDel.length)">Continue</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 1

您可以为此创建自己的指令。

加载后，您将焦点设置为$first的{{1}}元素，当您开始添加元素时，焦点应转到ngRepeat。

这是代码段正在运行：

＆＃13;

$last

＆＃13;

angular.module('app', [])
 .controller('mainCtrl', function($scope) {
   $scope.email = ['test1@gmail.com', 'test2@hotmail.com', 'test3@stackoverflow.com'];
   $scope.init = true;
   $scope.add = function() {
     $scope.email.push('');
     $scope.init = false;
   }
 })

 .directive('setFocus', function() {
   return {
     scope: {
       setFocus: '='
     },
     link: function(scope, element) {
       if (scope.setFocus) element[0].focus();
     }
   };
 });

＆＃13;

在ng-repeat内的输入上应用自动对焦

1 个答案: