저는 각도가있는 그립을 만들기 시작했습니다. 나는 아주 단순해야한다고 생각하고 있습니다.하지만 가지고있는 사람을 찾을 수는 없습니다. 정확히 동일한 시나리오로 게시되었습니다. 나는 3 개의 객체로 시작되는 콜렉션을 가지고 있고 ng-repeat를 사용하여 각각의 객체에 대한 입력 필드 세트를 생성하고 있습니다. SPA가 초기화 될 때 첫 번째 입력 필드에 포커스가 있어야합니다. 필요한 경우 자동 포커스로 수행 할 수 있습니다. 사용자가 마지막 입력 필드를 탭하면 ng-blur = "addRecord ($ index)"를 사용하여 컬렉션에 다른 객체를 추가합니다. DOM을 새로 고칠 때 새 객체의 첫 번째 필드에 포커스가 있어야합니다. 내 노력과 내가 온라인에서 찾을 수있는 모든 예제의 차이점은 모든 예제가 버튼과 클릭 (ng-click) 이벤트를 사용하여 추가를 시작한다는 것입니다.<input>이 ng-repeat에서 포커스를 얻는 방법을 선택하십시오.

DOM 요소가 즉시 만들어지기 때문에 $ timeout을 가진 사용자 지정 지시문이 필요하다고 생각하지만 이는 표준 요구 사항에 따라 많은 작업이 필요합니다. 나는 1.3.x를 사용하고있다. 누구든지 지시어를 작성하는 방법의 기초를 보여 주거나 내가 원하는 것을 할 수있는 이미 존재하는 도서관에 나를 가리킬 수 있을까? 내 현재 코드는 아래에 나와 있습니다.

HTML

<body ng-app="myApp"> 
     <div ng-controller="playerController"> 
      <ul> 
       <li ng-repeat="player in players"> 
        <input type="text" placeholder="FirstName" ng-model="player.firstName"></input> 
        <input type="text" placeholder="NicktName" ng-model="player.nickName"></input> 
        <input type="text" placeholder="SurnameName" ng-model="player.lastName" ng-blur="addNew($index)"></input> 
         {{player.firstName}} "{{player.nickName}}" {{player.lastName}} 
       </li> 
      </ul> 

     </div> 


    <script type="text/javascript" src="angular.js"></script> 
    <script type="text/javascript" src="myApp.js"></script> 
    </body>

myApp.js HTML에서

var myApp = angular.module('myApp',[]); 

myApp.controller('playerController',function($scope){ 
    $scope.players = [ 
    { 
     "firstName":"Aaron", 
     "lastName":"Reese", 
     "nickName":"Star Wars", 
     "givemefocus": "true" 
    }, 
    { 
     "firstName":"Ian", 
     "lastName":"Soinne", 
     "nickName":"Dominian", 
     "givemefocus": "false" 
    }, 
    { 
     "firstName":"Aaron", 
     "lastName":"Bailey", 
     "nickName":"Fernando", 
     "givemefocus": "false" 
    } 
    ]; 

    $scope.addNew = function($index){ 
    if($index == (players.length -1)){ 
     $scope.newPlayer = { 
     "firstName":"", 
     "lastName":"", 
     "nickName":"", 
     "givemefocus": "true" 
     }; 
     $scope.players.push($scope.newPlayer); 
    } 
    } 
});

출처

2015-01-19 Aaron Reese

app.directive('takefocus', function($timeout) { 
    return function(scope, element, attrs) { 
    scope.$watch(attrs.takefocus, function(value) { 
     if (value) { 
     $timeout(function() { element.focus(); }); 
     } 
    }); 
    }; 
});

는 :

 <li ng-repeat="player in players"> 
      <input type="text" placeholder="FirstName" ng-model="player.firstName" takefocus="player.givemefocus"></input>

출처

2015-01-19 16:42:24

감사합니다. 내 이해 확인하기 : $ watch를 추가하여 테이크 포커스가있는 모든 요소를 평가하고 속성 값이 변경된 경우 다이제스트주기가 완료된 후에 해당 요소가 포커스를받습니다 ($ 타임 아웃으로 인해). 변경된 요소가 두 개 이상있는 경우 DOM 렌더링에 따라 마지막 요소가 우선합니다. 내가 코드를 변경하여 컬렉션을 반복하고 마지막 하나를 제외한 모든 것에 givemefocus = false를 설정하거나 속성을 완전히 제거하면 value == "true"인지 확인하기 위해 지시문을 수정해야합니다. –

(값) –

나중에 및 onblur 기능이 입력을 찾는 첫 번째 입력 <input id=input{{$index}}../>에 ID를 추가.

<li ng-repeat="player in players"> 
    <input id="input{{$index}}" type="text" placeholder="FirstName" ng-model="player.firstName"></input> 
    <input type="text" placeholder="NicktName" ng-model="player.nickName"></input> 
    <input type="text" placeholder="SurnameName" ng-model="player.lastName" ng-blur="addNew($index)"></input> 
    {{player.firstName}} "{{player.nickName}}" {{player.lastName}} 
</li>

컨트롤러에 $timeout을 추가하십시오. 함수 addNew에서 DOM 렌더링이 끝날 때까지 대기하려면 0 지연을 사용하여 $timeout을 사용하십시오. 그러면 입력은 getElementById의 $timeout 함수에서 찾을 수 있습니다.

myApp.controller('playerController',function($scope, $timeout) 
{ 
    $scope.addNew = function($index){ 
    if($index == (players.length -1)){ 
     $scope.newPlayer = { 
     "firstName":"", 
     "lastName":"", 
     "nickName":"", 
     "givemefocus": "true" 
     }; 

     $scope.players.push($scope.newPlayer); 

     $timeout(function() 
     { 
     document.getElementById("input" + ($index + 1)).focus(); 
     }); 
    } 
    } 
});

출처

2016-06-20 20:32:05

<input>이 ng-repeat에서 포커스를 얻는 방법을 선택하십시오.

HTML

myApp.js HTML에서

답변

관련 문제