테이블의 열 - 각도 JS

Question

각도 j를 사용하는 열 및 행 생성 테이블에 대해 각도 js로 응용 프로그램을 만들고이 테이블을 정렬하기 위해 tablesorter.js 플러그인을 사용하고 있습니다. 응용 프로그램이 잘 작동하지만 문제는 응용 프로그램에서 사용자 환경 설정에 따라 표시되는 네 개의 열이 있다는 것입니다. 처음에는 표가 표시된 후 정렬이 제대로 작동하지만 열이 변경되면 새 열에 대한 정렬 작업이 작동하지 않습니다.

아래 코드에서 응용 프로그램에 대한 모의 데모를 처음 작성했습니다. 정렬은 제대로 작동하지만 changeDisplay 단추를 클릭하면 새 열 두 개가 표시 될 때 정렬이 표시되지 않습니다. 새 열 (서비스 1, 서비스 2)에 적용되었습니다.

아무에게도 해결책을 알려 줄 수 있습니까?

JS-Fiddle

HTML

<div ng-controller="Controller"> 
    <table border="1" id="mytable"> 
     <thead> 
     <tr> 
      <th>Work Name</th> 
      <th>Team Name</th> 
      <th>Place Name</th> 
      <th ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{servopt.servicename}}</th> 
      <th>Leader Name</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="val in datas"> 
      <td>{{val.workname}}</td> 
      <td>{{val.teamname}}</td> 
      <td>{{val.placename}}</td> 
      <td ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{val[servopt.serviceid]}}</td> 
      <td>{{val.leadername}}</td> 
     </tr> 
     </tbody> 
    </table> 
    <button ng-click="changeDisplay()">changeDisplay</button> 
    </div> 

Answer 1

사용중인 테이블 토커의 포크를 사용하면 열 데이터가 변경된 후 updateAll method을 트리거하여 tablesorter를 다시 초기화 할 수 있습니다 (demo).

setTimeout(function(){ 
    // updateAll include the header in the update 
    $('#mytable').trigger('updateAll'); 
}, 100); 

는 지금은 각 JS에 대해 아무것도 몰라, 그래서이 대신 setTimeout 기능

Answer 2

문제는 tablesorter에 플러그인 not play properly with dynamic columns을 수행합니다. 즉, 모든 Angular 코드를 제거하고 테이블에 대한 새 열을 만들고 trablesorter를 새로 고치더라도 작동하지 않습니다.

그런 경우 다른 플러그인이나 각도 솔루션 (take a look at the examples)을 찾고 싶습니다. 두 번째 지점으로

, you never touch the DOM from inside a controller :

는에 컨트롤러를 사용하지 마십시오

• 는 DOM을 조작 - 컨트롤러는 비즈니스 로직을 포함해야합니다. 프리젠 테이션 로직을 컨트롤러에 넣으면 테스트 가능성에 큰 영향을 미칩니다 ( ). Angular는 대부분의 경우 데이터 바인딩을 사용하고 디렉티브는 수동 DOM 조작을 캡슐화합니다.

지시어를 사용하십시오.

편집 :이

@Mottie's answer 당, 당신이 테이블에 updateAll 이벤트를 트리거 할 수 있지만 각도 다이제스트가 실행하고 DOM을 업데이트 할 때까지 기다릴 필요, 그래서 당신이 setTimeout이 필요합니다.

DOM과 접촉하는 모든 로직을 지시문으로 이동해야합니다.