2017-12-26 5 views
1

전적으로 angular js을 처음 사용합니다. 여기각도 js에서 자동 초점 행

HTML 

<table class="table table-striped" id="manageResumeTable"> 
             <thead class="text-center text-info text-capitalize"> 
              <th class="text-center col-xs-1">Sr.No.</th> 
              <th class="text-center col-xs-4">Document</th> 
              <th class="text-center col-xs-1">Score</th> 
              <th class="text-center col-xs-1">QuickScore</th> 
              <th class="text-center col-xs-5">Actions</th> 
             </thead> 
             <tr ng-repeat="file in processResumeFiles" ng-class="{'highlighter-row-Class' : file.id == 1}"> 
              <td class="text-center col-xs-1">{{ file.temporaryId }}</td> 
              <td class="view-orphan uploadResumeTableCellOverFlow col-xs-4"> 
               {{ file.attributes.name }} 
              </td> 
              <td class="text-center col-xs-1">{{file.totalScore}}</td> 
              <td class="text-center col-xs-1" ng-class= "{'highlighter-QuickScore' : file.attributes.areQuickScoreFieldsMissing}">{{file.attributes.quickScore}}</td> 
              <td class="text-center col-xs-5"> 
               <button class="btn btn-labeled btn-info" title="Annotate Un-annotated Words" data-ng-click="getOrphans($index)"> 
                 <i class="fa fa-eye" aria-hidden="true"></i> 
                </button> 
               <button class="btn btn-labeled btn-info" ng-show="file.attributes.isUploadedDocument" title="Promote to Gold Standard" data-ng-click="markAsGoldStd(file.attributes.name)"> 
                 <i class="fa fa-share" aria-hidden="true"></i> 
                </button> 
               <button class="btn btn-labeled btn-info" title="Delete from Corpus" data-ng-click="deleteResume(file.attributes.name)"> 
                 <i class="fa fa-trash" aria-hidden="true"></i> 
                </button> 
               <button class="btn btn-labeled btn-info" title="Add to Tracker" ng-disabled="!file.attributes.isModelHtmlPresent || !isjdDeleted || !jdSelected" 
                 data-ng-click="moveToJobDescription(file.attributes.name)"> 
                 <i class="fa fa-check-square" aria-hidden="true"></i> 
                </button> 
              </td> 
             </tr> 
            </table> 

, 나는 ng-repeat를 사용하고 - 나는 유사한 표가 있습니다. 따라서 데이터는 ajax 호출에서 가져옵니다.

지금 여기

는, file.id == 1이 잘 작동하고, 아약스 호출에서오고, 나는 또한 단지 file.id == 1 경우 해당 행을 초점을 맞추고 자 이제 이것에 대한 scrollbar 있습니다. 이제는 강조 할 수는 있지만 초점을 맞출 수는 없습니다. 그래서 어느 누구도 나를 도울 수 있습니까? 미리 감사드립니다.

+0

사용하는 모든 당신은에 정말로 당신의 행에서이 같은 것입니다있어. 출처 : https://docs.angularjs.org/api/ng/directive/ngIf –

+0

"포커스"로 무엇을 이해합니까? 브라우저가 첫 번째 줄로 자동 스크롤되기를 원하십니까? – MathKimRobin

+0

예 스크롤 막대가 해당 행에 있어야합니다. –

답변

0
$timeout(function(){ 
angular.element('.highlighter-row-Class').focus(); 
},100); 

'하이 라이터 행 클래스'가있는 첫 번째 행에 초점을 맞추어 100ms마다 찾으려고합니다. 데이터가로드 될 때이 작업을 원하면이 코드를 Ajax 응답 핸들러에 추가하십시오.

+0

이것은 나를 위해 작동하지 않습니다 –

-1

이 지시문은 조건이 참일 때 입력 요소를 포커스하게 만듭니다.

<input type="text" focus-on="file.id"> 

지침 :

.directive('focusOn', function() { 
    return { 
    scope: { 
     focusOn: '=' 
    }, 
    link: function($scope, $element) { 

    $scope.$watch('focusOn', function(shouldFocus) { 
    if (shouldFocus) { 
     $element[0].focus(); 
    } 
    }); 

} 
    }; 

}) 
+0

'focusWhen'은 어디 있습니까? – cst1992

+0

미안하지만 오타가 있습니다. 지금 업데이트 됨 – KPK

0

"초점"당신이 여기에서 찾고있는 용어가 아닙니다.

포커스는 입력란에 입력하고 해당 입력란에 포커스를 놓을 때 사용합니다 (예 : Tab 키를 사용하여 입력란을 전환 한 경우).

이 표에는 입력란이 전혀없는 것 같습니다.

내가 찾는 바는 이며 특정 행에으로 스크롤됩니다.

이미 ng-repeat이고 AJAX를 통해 고유 한 ID가 있으면 매우 간단합니다.

<td id = "file{{file.id}}">Some text here</td> 

그럼 그냥 스크롤 하이퍼 링크 또는 window.location.assign() 자바 스크립트 호출을 사용 : NG-경우

<a href="#file1">Scroll to row 1</a>