AngularJS：按钮隐藏列单击

我填充使用Javascript数组是这样的表格：

$scope.result = [ 
[5, 3/2/2016, 4, 'Bla..bla'], 
[2, 1/4/2016, 3, 'bla..bla.bla'], 
[1, 5/6/2016, 6, 'bla'], 
[4, 2/6/2016, 5, 'blablabla'], 
[3, 3/4/2016, 4, 'bla'], 
[2, 2/4/2016, 5, 'bla'], 
[1, 2/3/2016, 6, 'blablabla'] ];

这是我的HTML：

<table class="dataTable" border="1" > 
    <tr> 
     <td>Number</td> 
     <td>Date</td> 
     <td>Time</td> 
     <td>Description</td> 
    </tr> 
    <tr ng-repeat="row in result"> 
     <td ng-repeat="item in row">{{ item }}</td> 
    </tr>  
</table>

现在我有四个BU用每个名称列名称。

<span> 
    <button>Number</button> 
    <button>Date</button> 
    <button>Time</button> 
    <button>Description</button> 
</span>

当单击这些按钮中的任何一个时，我想显示/隐藏该列。

所以，如果我点击Description按钮，我想要显示/隐藏Description列。我试过使用ng-hide，但无法让整列隐藏，它只会隐藏第一个表格单元格。那我该怎么做？谢谢:)

来源

2016-07-06 Parth Bhoiwala

您是否正在寻找？如果是，请打起来了Answer.`

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.number = true; 
 
    $scope.date = true; 
 
    $scope.time = true; 
 
    $scope.dis = true; 
 
    
 
$scope.result = [ 
 
[5, 3/2/2016, 4, 'Bla..bla'], 
 
[2, 1/4/2016, 3, 'bla..bla.bla'], 
 
[1, 5/6/2016, 6, 'bla'], 
 
[4, 2/6/2016, 5, 'blablabla'], 
 
[3, 3/4/2016, 4, 'bla'], 
 
[2, 2/4/2016, 5, 'bla'], 
 
[1, 2/3/2016, 6, 'blablabla'] ]; 
 

 
    $scope.toggleNumber = function(){ 
 
    if($scope.number === true) 
 
     $scope.number = false; 
 
    else if($scope.number === false) 
 
     $scope.number = true; 
 
    } 
 
    $scope.toggleDate = function(){ 
 
    if($scope.date === true) 
 
     $scope.date = false; 
 
    else if($scope.date === false) 
 
     $scope.date = true; 
 
    } 
 
    $scope.toggleTime = function(){ 
 
    if($scope.time === true) 
 
     $scope.time = false; 
 
    else if($scope.time === false) 
 
     $scope.time = true; 
 
    } 
 
    $scope.toggleDis = function(){ 
 
    if($scope.dis === true) 
 
     $scope.dis = false; 
 
    else if($scope.dis === false) 
 
     $scope.dis = true; 
 
    } 
 
    
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <table class="dataTable" border="1" > 
 
    <tr> 
 
     <td ng-if="number">Number</td> 
 
     <td ng-if="date">Date</td> 
 
     <td ng-if="time">Time</td> 
 
     <td ng-if="dis">Description</td> 
 
    </tr> 
 
    <tr ng-repeat="row in result"> 
 
     <td ng-if="number">{{row[0]}}</td> 
 
     <td ng-if="date">{{row[1]}}</td> 
 
     <td ng-if="time">{{row[2]}}</td> 
 
     <td ng-if="dis">{{row[3]}}</td> 
 
    </tr> 
 
     
 
</table><br> 
 
<span> 
 
    <button ng-click="toggleNumber()">Number</button> 
 
    <button ng-click="toggleDate()">Date</button> 
 
    <button ng-click="toggleTime()">Time</button> 
 
    <button ng-click="toggleDis()">Description</button> 
 
</span> 
 
    </body> 
 

 
</html>

来源

2016-07-06 19:34:45

请参阅工作plunker以及 https://plnkr.co/edit/N9Sh1nOlLewcQaGNjOzs?p=预览 –

感谢您的回答，它很好地工作，但我希望代码是这样的，我不必为每列创建不同的函数和$ scope变量。因为我可以有15列。那么有没有办法只用1或2个函数呢？ –

您可以编写一个单一功能并使用开关盒。这将很容易维护或者我们可以尝试找到一种方法来切换Angulur HTML模板本身 –

AngularJS：按钮隐藏列单击

回答

相关问题