我有一个有四列的表格，它看起来像这样:
我使用 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>
现在我有四个按钮，每个按钮都有列名称。
<span>
<button>Number</button>
<button>Date</button>
<button>Time</button>
<button>Description</button>
</span>
当单击任何一个按钮时，我想显示/隐藏该列。
因此，如果我单击 Description 按钮，我想显示/隐藏 Description 列。
我尝试使用 ng-hide 但无法隐藏整个列，它只会隐藏第一个表格单元格。那么我该怎么做呢？
谢谢:)
最佳答案
你在找这个吗？如果是，请点击答案。`
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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f2fdf4e6fff2e1bdf9e0d3a2bda1bdeb" rel="noreferrer noopener nofollow">[email protected]</a>" 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>`
关于javascript - AngularJS:单击按钮隐藏列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38231873/