Angular 智能 Table 拖动 headers 具有不同的 td 元素

Question

我正在为数据表使用 Angular Smart Table 插件。我正在使用 this plnkr 用于拖动 headers 功能。我试过了，效果很好，但问题是我有不同的 td 元素，例如复选框、收音机等。

例如在其代码中

    <tr ng-repeat="row in rowCollection">
    <td ng-repeat="col in columns">{{row[col]}}</td>
    </tr>

这里 td 的所有元素都是相似的，我想要不同的元素，我不能使用 ng-repeat。

这是我的

<tr ng-repeat="t in displayedCollection">
            <td>{{t.Id}}</td>
            <td>{{t.Title}}</td>
            <td>{{t.Content}}</td>
            <td>{{t.Status}}</td>
            <td><input type="checkbox" ng-model="t.IsActive" disabled="disabled"></td>
            <td><input type="checkbox" ng-model="t.IsCommentAllowed" disabled="disabled"></td>
            <td><input type="checkbox" ng-model="t.IsRatingAllowed" disabled="disabled"></td>
        </tr>

在此代码中 headers 正在拖动但其列不是。此代码使用 lrDragNDrop 插件进行拖放。我应该怎么做可能需要帮助吗？

Answer 1

这是一个有效的plnkr...

想法是将 "other" 类型的列添加到列列表中，然后使用 ng-if。希望对你有用。

标记

 <tr ng-repeat="row in rowCollection">
   <td ng-repeat="col in columns">
     <span ng-if="col != 'cb'">{{row[col]}}</span>
     <span ng-if="col == 'cb'">
       <input type="checkbox" ng-model="row.IsActive">
     </span>
   </td>
 </tr>

JS

$scope.columns=['cb', 'firstName', 'lastName','age','email','balance'];

** 已更新（使用 ng-switch 而不是 ng-if）

      <tr ng-repeat="row in rowCollection">
          <td ng-repeat="col in columns" ng-switch="col">
            <span ng-switch-default>{{row[col]}}</span>
            <span ng-switch-when="cb">
              <input type="checkbox" ng-model="row.IsActive">
            </span>
          </td>
      </tr>

Angular 智能 Table 拖动 headers 具有不同的 td 元素

Angular Smart Table drag headers with different td elements

datatable

drag-and-drop

angularjs

smart-table