Get versteckte Spalten von Smart-Tabelle in Dropdownliste AngularJS

Ich bin neu in AngularJS, kann jemand helfen, dies zu erreichen. Ich habe eine intelligente Tabelle mit 4 Spalten, zunächst setze ich und col 4 auf ng-show=false, so wenn ich die Seite laden nur col 1 und col 2 werden angezeigt. Bis hier ist es gut und gut.Get versteckte Spalten von Smart-Tabelle in Dropdownliste AngularJS

meine Frage: Kann ich col3 und col4 in einem Drop-Down so dass der Benutzer klicken und die Spalten sichtbar machen.

Sichtbare Spalten sollten in der Dropdown-Liste nicht verfügbar sein, nehme an, wenn col1, col2, col3 sichtbar sind, dann nur col4 in Drop-Down angezeigt werden soll.

Vielen Dank im Voraus.

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>

Quelle

2016-06-02 Hussain

könnten Sie ein plnkr/jsfiddle bieten zu zeigen, was haben Sie versucht? – CozyAzure

Erstelle ein Spaltenobjekt oder ein Array und benutze das zum Einstellen von 'ng-show' und filtere es nach' ng-options' – charlietfl

Könnte irgendein plesae plnkr/fiddle dafür erstellen, es wäre wirklich hilfreich – Hussain

Werfen Sie einen Blick auf die folgende Arbeit um

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>

Quelle

2016-06-04 16:57:38

Danke nidhish .. das funktioniert perfekt – Hussain

Get versteckte Spalten von Smart-Tabelle in Dropdownliste AngularJS

Antwort

Verwandte Themen