Question

我有一个包含四列的表，它看起来像这样：

我使用Javascript数组填充表格，如下所示：

try {
    timeout(time: 1, unit: 'SECONDS') {
        node('my-node') {
            echo 'Node is up. Performing optional step.'
        }
    }
    node('my-node') {
        echo 'This is an optional step.'
    }
} catch (e) {
    echo 'Time out on optional step. Node down?'
}

这是我的HTML：

$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'] ];

现在我有四个按钮，每个按钮都有一个名称列。

<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但是无法隐藏整个列，它只会隐藏第一个表格单元格。那我该怎么做？谢谢:)

Answer 1

你正在寻找这个吗？如果是，请点击答案。

＆＃13;

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

＆＃13;

<!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="angular.js@1.2.x" 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>

＆＃13;

`

AngularJS：点击按钮时隐藏列

1 个答案: