在下拉列表 AngularJS 中获取智能 table 的隐藏列

Question

我是 AngularJS 的新手，任何人都可以帮助实现这一目标。我有一个智能 table 有 4 列，最初我将 col 3 和 col 4 设置为 ng-show=false，所以当我加载页面时仅 col 1 和 col 2 正在显示。到这里为止一切都很好。

我的问题： 我可以在下拉列表中包含 col3 和 col4 以便用户可以单击并使这些列可见吗？

可见的列应该在下拉列表中不可用，假设如果col1、col2、col3是可见的，那么下拉列表中只显示col4 .

提前致谢。

var myApp = angular.module("myModule", ['smart-table']);

myApp.controller('customCtrl', function ($scope) {

    var rowCollection = [
        { col1: "a", col2: "b", col3: "c", col4: "d" },
        { col1: "a1", col2: "b1", col3: "c1", col4: "d1" },
        { col1: "a2", col2: "b2", col3: "c2", col4: "d2" },
        { col1: "a3", col2: "b3", col3: "c3", col4: "d3" },
        { col1: "a4", col2: "b4", col3: "c4", col4: "d4" },
        { col1: "a5", col2: "b5", col3: "c5", col4: "d5" },

    ];


    $scope.rowCollection = rowCollection;


});

table {
    border-collapse: collapse;
    font-family: Arial;
}

.tablerow:hover {
    background-color: #25CCDA;
}

td {
    border: 1px solid black;
    padding: 5px;
}

th {
    border: 1px solid black;
    padding: 5px;
    text-align: center;
    background-color: #999999;
    cursor:pointer;
}

<!DOCTYPE html>
<html ng-app="myModule">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/smart-table.debug.js"></script>
    <link href="Style.css" rel="stylesheet" />
</head>
<body ng-controller="customCtrl">
    <select>
        <option value="add column">add column</option>
        
    </select>
    <br />
    <br />
    <table st-table="rowCollection">

        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th ng-show="col3">col3</th>
                <th ng-show="col4">col4</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td>{{ row.col1 }}</td>
                <td>{{ row.col2 }}</td>
                <td ng-show="col3">{{ row.col3 }}</td>
                <td ng-show="col4">{{ row.col4 }}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

看看下面的解决方法

var myApp = angular.module("myModule", []);
myApp.controller('customCtrl', function($scope) {

  $scope.enableColumns = function(header) {
    header.visible = !header.visible;
  };
  $scope.colHeaders = [{
    name: "col1",
    visible: true
  }, {
    name: "col2",
    visible: true
  }, {
    name: "col3",
    visible: false
  }, {
    name: "col4",
    visible: false
  }]
  var rowCollection = [{
      col1: "a",
      col2: "b",
      col3: "c",
      col4: "d"
    }, {
      col1: "a1",
      col2: "b1",
      col3: "c1",
      col4: "d1"
    }, {
      col1: "a2",
      col2: "b2",
      col3: "c2",
      col4: "d2"
    }, {
      col1: "a3",
      col2: "b3",
      col3: "c3",
      col4: "d3"
    }, {
      col1: "a4",
      col2: "b4",
      col3: "c4",
      col4: "d4"
    }, {
      col1: "a5",
      col2: "b5",
      col3: "c5",
      col4: "d5"
    }

  ];


  $scope.rowCollection = rowCollection;


});

table {
  border-collapse: collapse;
  font-family: Arial;
}

.tablerow:hover {
  background-color: #25CCDA;
}

td {
  border: 1px solid black;
  padding: 5px;
}

th {
  border: 1px solid black;
  padding: 5px;
  text-align: center;
  background-color: #999999;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myModule">

<head>
</head>

<body ng-controller="customCtrl">
  <select ng-model="selectedItem" ng-change="enableColumns(selectedItem)" ng-options="header.name for header in colHeaders|filter:{visible: false}">
  </select>
  <br />
  <br />
  <table>

    <thead>
      <tr>
        <th ng-repeat="header in colHeaders" ng-show="header.visible">{{header.name}}<div><a href="javacript:void(0);" ng-click="enableColumns(header)" >hide</a></div></th>
        
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rowCollection">
        <td ng-repeat="header in colHeaders" ng-show="header.visible">{{ row[header.name] }}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

在下拉列表 AngularJS 中获取智能 table 的隐藏列

Get hidden columns of smart table in Dropdownlist AngularJS

jquery

angularjs

smart-table