0

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

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

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

提前感谢我可能得到的任何帮助。

4

1 回答 1

2

知道了。好的，我认为表格未更新的原因是因为您的控制器在单击“购买”按钮时没有重新运行定义表格的代码。我已经更改了这一点，因此我没有将配置数组$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'
      }
    ];
    }

我更新了 jsfiddle - 检查一下。

于 2016-11-04T18:58:33.920 回答