根據索引顯示/隱藏列

<div ng-controller="checkBoxController"> 
    <div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
      <p ng-repeat='(key, val) in employees[0]'> 
       <label> 
       <input ng-model='colSettings[$index]' type="checkbox" />{{ key }}</label> 
      </p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveSelectedColumn()">Close</button> 
      </div> 
     </div> 

     </div> 
    </div> 
    <div class="panel"> 
     <button type="button" class="btn btn-default" ng-click="tableDataReset();">Reset</button> 

     <table class="table-condensed" id="employeeTable" border="1"> 
     <thead> 
      <tr> 
      <th ng-if='colSettings[$index]' ng-repeat='(key, val) in employees[0]' class="name">{{ key }}</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="employee in employees"> 
      <td ng-if='colSettings[$index]'>{{employee.name}}</td> 
      <td ng-if='colSettings[$index]'>{{employee.age}}</td> 
      <td ng-if='colSettings[$index]'>{{employee.gender}}</td> 
      </tr> 
     </tbody> 
     </table> 
     <a href="" title="Column Setting" data-toggle="modal" data-target="#myModal">Settings</a> {{ colSettings }} 
    </div> 
    </div> 

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

myApp.controller('checkBoxController', function($scope) { 
    $scope.employees = [{ 
    name: 'John', 
    age: 25, 
    gender: 'boy' 
    }, { 
    name: 'Jessie', 
    age: 30, 
    gender: 'girl' 
    }]; 

    $scope.colSettings = [true, true, true]; 

    $scope.tableDataReset = function() { 
    $scope.employees = [{ 
     name: 'John', 
     age: 25, 
     gender: 'boy' 
    }, { 
     name: 'Jessie', 
     age: 30, 
     gender: 'girl' 
    }]; 
    }; 
});

具有設置按鈕的列表數據，其中模式對話框打開。這種模式對話框包含的複選框等於表中的數字列。用戶選擇任何一個複選框&關閉按鈕，然後根據檢查的複選框（即只檢查列在表內可見的複選框）過濾表。當前存儲真&錯誤的檢查& colSettings數組中未勾選的複選框。也在複選框選擇當前隱藏列，我想要在模式關閉按鈕。使用上面的代碼，我可以隱藏th而不是td及其數據。根據索引顯示/隱藏列

按照plnk http://plnkr.co/edit/G5bT7G?p=preview

來源

2016-12-07 jinish shah

你有什麼saveSelectedColumn方法？ – migueref

目前在複選框中選中並取消選中顯示/隱藏表格列。我想在覆蓋的關閉按鈕上執行該操作，例如saveSelectedColumn（）。 –

如果你有多個列，動態更新一切

<table class="table-condensed" id="employeeTable" border="1"> 
    <thead> 
     <tr> 
     <th ng-if="val" ng-repeat="(key, val) in colSettings" class="name">{{ key }}</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="employee in employees"> 
     <td ng-if="colSettings[key]" ng-repeat="(key,value) in employee">{{value}}</td> 
     </tr> 
    </tbody> 
    </table>

DEMO

來源

2016-12-07 18:35:23

它的工作原理。但我的桌子上會有很多列，目前只包括在內。所以每次對索引進行硬編碼都沒有意義。還有其他的選擇嗎？另外$ index會一直給出當前的索引，所以不知道爲什麼會有問題。 –

您正在使用員工的索引而不是索引的列，這裏是問題 – migueref

@migueref ok。有沒有辦法實現它？ –

我寧願做動態的，所以不存在用於不要求你要記住索引

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

 
myApp.controller('checkBoxController', function($scope) { 
 
    $scope.employees = [{ 
 
    name: 'John', 
 
    age: 25, 
 
    gender: 'boy' 
 
    }, { 
 
    name: 'Jessie', 
 
    age: 30, 
 
    gender: 'girl' 
 
    }]; 
 
$scope.getColSettingForRow = function(key){ 
 
\t var keys = Object.keys($scope.employees[0]); 
 
\t var index = keys.indexOf(key); 
 
\t return index; 
 
} 
 
    $scope.colSettings = [true, true, true]; 
 

 
    $scope.tableDataReset = function() { 
 
    $scope.employees = [{ 
 
     name: 'John', 
 
     age: 25, 
 
     gender: 'boy' 
 
    }, { 
 
     name: 'Jessie', 
 
     age: 30, 
 
     gender: 'girl' 
 
    }]; 
 
    }; 
 
});

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

 
<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.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="checkBoxController"> 
 
    <div id="myModal" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <p ng-repeat='(key, val) in employees[0]'> 
 
       <label> 
 
       <input ng-model='colSettings[$index]' type="checkbox" />{{ key }}</label> 
 
      </p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveSelectedColumn()">Close</button> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    <div class="panel"> 
 
     <button type="button" class="btn btn-default" ng-click="tableDataReset();">Reset</button> 
 
    
 
     <table class="table-condensed" id="employeeTable" border="1"> 
 
     <thead> 
 
      <tr> 
 
      <th ng-if='colSettings[$index]' ng-repeat='(key, val) in employees[0]' class="name">{{ key }}</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="employee in employees"> 
 
      <td ng-if='colSettings[getColSettingForRow("name")]'>{{employee.name}}</td> 
 
      <td ng-if='colSettings[getColSettingForRow("age")]'>{{employee.age}}</td> 
 
      <td ng-if='colSettings[getColSettingForRow("gender")]'>{{employee.gender}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     <a href="" title="Column Setting" data-toggle="modal" data-target="#myModal">Settings</a> {{ colSettings }} 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-12-07 18:49:01

我有密鑰ID和創建日期以及我的JSON對象，但在複選框列表和表列表中應用重複時需要忽略它們。這可能嗎？ –

如果你想隱藏它們。只需在複選框和tr下忽略它們即可。它會工作。如果你想正確的答案。請給我樣品，以便我可以檢查它。 –

我會解釋的替代品。您必須對colSettings進行ng-repeat，因爲您正在爲員工使用索引，這就是爲什麼不起作用。

如果您記錄所有colSettings的值爲每個示例的布爾值，您可以使用此值顯示或隱藏，但是您將使用colSettings的索引，因爲在ng中重複您將通過colSetting循環，您可以打印可見列的值。

來源

2016-12-07 19:05:02 migueref

如果您有任何問題，您可以質疑更多信息 – migueref

無法獲取。是否有可能實施＆顯示？ –

根據索引顯示/隱藏列

回答

相關問題