Question

我使用angular-js为使用angular-js的列和行生成表创建了角度js中的应用程序，并使用tablesorter.js插件对表进行排序。该应用程序工作正常，但问题是在应用程序中有四列已根据用户首选项显示，比如说最初显示表后排序正常工作但是当对列进行了更改时排序不适用于新列

在下面的代码中我构建了一个关于应用程序的模拟演示，这里最初排序正常工作，但是当点击changeDisplay按钮时，当显示新的两列时，排序不会应用于那些新列（Service One），服务二）

任何人都可以告诉我一些解决方案吗

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

~~问题是tablesorter插件执行not play properly with dynamic columns。换句话说，即使您删除所有Angular代码并尝试为表创建新列并刷新trablesorter，它也不起作用。~~

~~在这种情况下，您想要寻找替代插件，或者可能只是一个Angular解决方案（take a look at the examples）。~~

作为第二点，you never touch the DOM from inside a controller：

请勿使用控制器：


操纵DOM - 控制器应仅包含业务逻辑。   将任何表示逻辑放入控制器会显着影响   它的可测试性。 Angular对大多数情况和指令都有数据绑定   封装手动DOM操作。

为此目的使用指令。

修改

根据@Mottie's answer，您可以在表格上触发updateAll事件，但您需要等待Angular摘要运行并更新DOM，因此您需要setTimeout。

您仍然应该将触及DOM的所有逻辑移动到指令。

Answer 2

使用您正在使用的tablesorter的分支，您可以在任何列数据发生更改（updateAll method）后触发demo重新初始化tablesorter。

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

现在我对angular js一无所知，所以如果它在回调中执行而不是在setTimeout函数内执行，上面的代码会更好用

表中的列 - Angular JS

2 个答案: