Question

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

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

我如何以Angular方式实现？

Answer 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>

Answer 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);
      }

    }
  };

});

Answer 3

考虑使用<col/>或ng-style

向ng-class添加条件样式

有条件的数据显示隐藏在Angularjs中

3 个答案: