动态添加列到表(使用colResizable插件)

时间:2015-05-12 01:20:52

标签: jquery angularjs html-table

我使用插件colresizable来操纵列宽。我想做的是能够动态添加列。我试过了:

<body ng-controller='myCtrl'>
  <table style="width: 100%;height:300px" col-resizeable>
    <tr>
      <td  ng-repeat='column in columns track by $index' ng-style="{'background':column}">content</td>
    </tr>
  </table>
 <button type='button' ng-click="addColumn()">Add</button>
</body>

这是一个plunker(添加按钮应该添加绿色列)

http://plnkr.co/edit/8rfoYoQVZ3fRk53192TX?p=preview

没有成功。有人能说出我做错了吗?

编辑:以下是我添加列的方法......

$scope.addColumn = function(){
   $scope.columns.push('green');
}

1 个答案:

答案 0 :(得分:2)

你需要$ timeout的任何理由?如果你删除它然后它将工作

myApp.directive('colResizeable', function($interval) {
return {
    restrict: 'A',
    link: function(scope, elem) {

    elem.colResizable({
      liveDrag: true,
      gripInnerHtml: "<div class='grip'></div>",
      draggingClass: "dragging",
      onDrag: function() {
        //trigger a resize event, so paren-witdh directive will be updated
        //$(window).trigger('resize');
      }
    });

}
};
});

其他解决方案是观看&#34;列&#34;和残疾人士每次更改时都重新启用colResizable。

http://plnkr.co/edit/elABlMAhV25LSiphEjXk?p=preview