Question

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

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

这个变量也是用于模型列的visible属性的，但是当变量更改时，列不会像我预期的那样隐藏/显示，它似乎只是隐藏/显示取决于什么值变量初始化为。反正有没有像我原先预期的那样动态地完成这项工作，有没有人知道为什么它不会以这种方式工作？

提前感谢我的帮助。

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 - 检查一下。

Adapt-strap / angular动态表柱

1 个答案: