Angular Smart Table使用不同的td元素拖动标题

时间:2016-01-03 22:26:03

标签: angularjs datatable drag-and-drop smart-table

我正在为数据表使用Angular Smart Table插件。我正在使用this plnkr 用于拖动标题功能。我尝试过,它工作正常,但问题是我有不同的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>

在此代码标题中拖动但其列不是。此代码使用lrDragNDrop插件进行拖放操作。我该怎么办才有可能需要帮助?

1 个答案:

答案 0 :(得分:0)

这是一个有效的plnkr ......

我们的想法是将“其他”类型的列添加到列列表中,然后使用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>