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：按鈕隱藏列單擊

回答

相關問題