角度范围更改不更新自适应表列可见性答案

【问题标题】：Angular scope change not updating adapt-strap table column visibility角度范围更改不更新自适应表列可见性
【发布时间】：2018-06-15 14:04:57
【问题描述】：

我想知道是否有人可以帮助我，我一直在努力让一些东西工作一段时间，但几乎没有进展。我正在使用 angularjs 和 bootstrap 以及 adapt-strap，它基本上是一个基于 angular 和 bootstrap 的轻量级 ui 组件。为了尝试简化我的问题，我创建了一个现有小提琴的分支并稍微更改了代码。

http://jsfiddle.net/me397squ/3/

在上面链接的小提琴中，我使用了 adapt-strap 来创建和显示表格。对于模型列，我想根据特定条件隐藏/显示该列，因此我创建了一个名为 visibleProperty 的范围变量并将其设置为 true（jsfiddle 中的第 100 行）。然后我使用这个变量作为表的可见属性（第 108 行），如下所示。如果我最初将其设置为 true，则显示该列，如果我最初将其设置为 false，则隐藏该列。如您所料。

  $scope.carsTableColumnDefinition = [
  {
    columnHeaderDisplayName: 'Model',
    displayProperty: 'name',
    sortKey: 'name',
    columnSearchProperty: 'name',
    visible: $scope.visibleProperty
  },

我的问题是代码的后面部分更新了这个字段（第 149 行），说它最初设置为 true 并更改为 false，但是该列并没有隐藏。它似乎只采用给定的初始值，并且当范围变量更改时，它没有任何区别。我已通过在表的“模型列可见属性”列中输出它来确认范围变量正在按预期更改。

当 $scope.visibleProperty 更新时，有没有办法让列隐藏/显示？这个问题开始让我发疯，我非常感谢您提供的任何帮助。

谢谢。

【问题讨论】：

我不熟悉adapter-strap。我不太清楚你在问什么。是否可以对可见属性使用函数？阿拉visible: function() { return $scope.visibleProperty; }？ Visible 在您的示例中仅设置一次。没有发生数据绑定。
谢谢，我给它一个快速测试并在这里更新了 jsFiddle：jsfiddle.net/me397squ/4 不幸的是它似乎仍然不起作用，正如你所说，visibleProperty 似乎没有被绑定，不知道如何完成那个。
我提交了我的评论作为答案。我在fiddle 添加了一个按钮，称为切换。试试看。看看这是不是你要找的。span>
再次感谢，虽然值在您的切换中发生变化，但列仍然可见（它最初设置的值也是），即我希望看到它根据 $ 的值隐藏/显示scope.visibleProperty
现在我明白了。这实际上是stackoverflow.com/questions/40428855/… 的副本。这个问题与我最初认为的问题并没有太大不同。您应该绑定到函数 column-definition="getCarsTableColumnDefinition()"，而不是 column-definition="carsTableColumnDefinition"。

标签： angularjs angularjs-scope angularjs-bindings adapt-strap

【解决方案1】：

您应该将列定义绑定到函数而不是数组。这样，每次发生 $digest 循环时，都会执行该函数并更新表定义。

<ad-table-lite table-name="carsForSale"
             enable-column-search="true"
             column-definition="getCarsTableColumnDefinition()"
             ...

您的控制器将如下所示：

$scope.getCarsTableColumnDefinition = function() {
    return [
        {
            columnHeaderDisplayName: 'Model',
            displayProperty: 'name',
            sortKey: 'name',
            columnSearchProperty: 'name',
            visible: $scope.visibleProperty
        },
        ...];
};

重复：Adapt-strap/angular dynamic table column

【讨论】：