Adapt-strap/angular动态表列

Question

我正在查看 adpt-strap table lite 并正在使用它。这是我正在玩的 JSfiddle：http://jsfiddle.net/cx5gm0sa/ 我正在尝试做的事情，我想知道是否有可能尝试动态隐藏/显示一列。我添加的代码包括 $scope.showColumn = true; （你可以在 html 页面上看到它的值，我在顶部打印出来）。 当您单击任何行上的购买按钮时，变量将设置为与之前相反的值，因此它在真假之间交替。

$scope.buyCar = function (car) {
    $scope.showColumn = !$scope.showColumn
};

此变量也是用于模型列的可见属性的变量，但是当变量更改时，列不会像我预期的那样隐藏/显示，它似乎只会根据值隐藏/显示变量被初始化。无论如何，是否可以像我最初预期的那样动态地进行这项工作，并且有人知道为什么它不会以这种方式工作吗？

提前感谢您提供的任何帮助。

Answer 1

知道了。好的，我认为表格没有更新的原因是因为您的控制器在单击“购买”按钮时没有重新运行定义表格的代码。我对此进行了更改，因此我没有将配置数组直接分配给$scope.carsTableColumnDefinition，而是定义了一个名为getDefinition 的函数，它返回数组。然后在$scope.buyCar = function (car){}，我再调用函数。

以下是我所做的更改：

$scope.carsTableColumnDefinition = getDefinition();
...
//Then inside the buyCar function I have:
$scope.buyCar = function (car) {
   $scope.showColumn = !$scope.showColumn;
   //now refresh by calling the get-definition function:
   $scope.carsTableColumnDefinition = getDefinition();
};
..
//Finally, this is my getDefinition function:
function getDefinition(){
    return [
      {
        columnHeaderDisplayName: 'Model',
        displayProperty: 'name',
        sortKey: 'name',
        columnSearchProperty: 'name',
        visible: $scope.showColumn
      },
      {
        columnHeaderTemplate: '<span><i class="glyphicon glyphicon-calendar"></i> Model Year</span>',
        template: '<strong>{{ item.modelYear }}</strong>',
        sortKey: 'modelYear',
        width: '12em',
        columnSearchProperty: 'modelYear'
      },
      {
        columnHeaderTemplate: '<span><i class="glyphicon glyphicon-usd"></i> Price</span>',
        displayProperty: 'price',
        cellFilter: 'currency',
        sortKey: 'price',
        width: '9em',
        columnSearchProperty: 'price'
      },
      {
        columnHeaderDisplayName: 'Buy',
        templateUrl: 'src/tablelite/docs/buyCell.html',
        width: '4em'
      }
    ];
    }

我updated the jsfiddle - 看看吧。