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

Question

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

而且用户可以过滤结果，并使用不同的参数提交新的查询。取决于其中一个复选框和结果列表，我必须在表格中隐藏一列。

我怎么能成角的方式实现？

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