Angularjs中的条件数据显示隐藏答案

【问题标题】：Conditional data show hide in AngularjsAngularjs中的条件数据显示隐藏
【发布时间】：2013-06-19 11:24:05
【问题描述】：

我正在开发一个应用程序，我必须根据用户过滤器生成表格报告。

用户可以过滤结果并使用不同的参数提交新的查询。根据复选框和结果列表中的一个，我必须显示隐藏表格中的一列。

如何以 Angular 的方式实现？

【问题讨论】：

docs.angularjs.org/api/ng.directive:ngShow 文档是你最好的朋友 ;)
这不是我想要的
@arnold - 这就是你所需要的。

标签： javascript angularjs show-hide

【解决方案1】：

您可以将ng-show 与条件一起使用，如下所示：

<select ng-model="filter">
  <option value="blah"></option>
  <option value="foo"></option>
</select>
<table>
  <tr>
    <td>1</td>
    <td ng-show="filter=='blah'">blah blah</td>
  </tr>
  <tr>
    <td>2</td>
    <td ng-show="filter=='blah'">foo foo</td>
  </tr>
</table>

【讨论】：

他说他想隐藏列，而不是行。这要困难得多:)。
如果你想隐藏行 - 应用到tr，如果你想隐藏列 - 应用到td。为什么更难？更新了答案示例。
@Blackhole，如果你对行使用 ng-repeat，代码会更少。
@SET 我已经编辑了这个问题，实际上我得到了一个产品列表，我正在做

【解决方案2】：

对我来说，显示和隐藏列似乎比这更复杂。这不仅仅是简单地将条件ng-show 属性应用于事件处理程序——至少，我还没有发现这个想法可以按预期工作。

我目前正在研究如何在数据库表中隐藏一整列数据，我刚刚看到了这篇博文。这听起来像是一个可行的解决方案，我实际上可以理解作者在说什么——这对我来说很重要，因为我只是在学习如何使用 Angular。这是链接，以防它可以帮助您或其他人解决此问题。我稍后会报告它是否对我有帮助。

http://entwicklertagebuch.com/blog/2013/11/datatable-with-fully-dynamic-columns-in-angularjs/

（来自链接的示例代码）

function createTDElement(directive) {
var table = angular.element('<table><tr><td ' + directive + '></td></tr></table>');
return table.find('td');
}
app.directive('item', function($compile) {
  function createTDElement(directive) {
    var table = angular.element('<table><tr><td ' + directive + '></td></tr></table>');
    return table.find('td');
  }

  function render(element, scope) {
    var column, html, i;
    for (i = 0; i < scope.columns.length; i++) {
      column = scope.columns[i];
      if (column.visible) {
        html = $compile(createTDElement(column.directive))(scope);
        element.append(html);
      }
    }

  }

  return {
    restrict: 'A',
    scope: {
      item: "=",
      columns: "="
    },
    controller: function($scope, $element) {
      $scope.$watch(function() {
        return $scope.columns;
      }, function(newvalue, oldvalue) {
        if (newvalue !== oldvalue) {
          $element.children().remove();
          render($element, $scope);
          $compile($element.contents())($scope);
        }
      }, true);
    },
    compile: function() {
      return function(scope, element) {
        render(element, scope);
      }

    }
  };

});

【讨论】：

【解决方案3】：

考虑使用ng-style 或ng-class 向<col/> 添加条件样式

【讨论】：