2

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

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

我如何以 Angular 的方式实现？

4

3 回答 3

21

您可以使用带有条件的 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>
于 2013-06-19T11:29:37.417 回答
1

对我来说，显示和隐藏列似乎比这更复杂。这不仅仅是简单地将条件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);
      }

    }
  };

});
于 2014-07-15T15:19:41.637 回答
0

考虑将条件样式添加到<col/>with ng-styleorng-class

于 2017-04-14T02:37:56.813 回答