Sortieren einer Tabelle mit dynamisch angezeigten Spalten in AngularJS

-1

Ich versuche, eine Tabelle zu machen, die Sortierung sowie eine Schaltfläche hat, um auszuwählen, welche Spalten angezeigt werden sollen.
Beide Funktionen funktionieren, wenn sie alleine verwendet werden, aber wenn ich sie zusammen benutze, scheitern sie.Sortieren einer Tabelle mit dynamisch angezeigten Spalten in AngularJS

angular.module('test', []); 
 

 
angular.module("test").controller("sessionCtrl", sessionCtrl); 
 

 

 
function sessionCtrl() { 
 
    var vm = this; 
 
    vm.testvar= "HELLO"; 
 
    vm.sortType = 'name'; 
 
    vm.sortReverse = false; 
 

 
    vm.columnVisiblity = { 
 

 
    name: true, 
 
    specification: true, 
 
    type: true, 
 
    }; 
 
    vm.TableData = [{ 
 

 
    name: "2017/03/01-14", 
 
    specification: "IDB-idb-1wk", 
 
    type: "Full" 
 

 
    }, { 
 

 
    name: "2017/03/01-17", 
 
    specification: "Set-04", 
 
    type: "Full" 
 
    }, { 
 
    name: "2017/03/04-11", 
 
    specification: "IDB-idb-1wk", 
 
    type: "Full" 
 
    }]; 
 

 

 
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-controller="sessionCtrl as vm"> 
 
    {{vm.testvar}} 
 
    <table> 
 
    <thead> 
 
     <tr> 
 

 
     <th ng-click="vm.sortType='name'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.name">NAME 
 
     </th> 
 
     <th ng-click="vm.sortType='specification'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.specification">SPECIFICATION 
 
     </th> 
 
     <th ng-click="vm.sortType='type'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.type">TYPE 
 
     </th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr ng-repeat="item in vm.TableData | orderBy:vm.sortType:vm.sortReverse"> 
 

 
     <td ng-if="vm.columnVisiblity.name">{{item.name}}</td> 
 
     <td ng-if="vm.columnVisiblity.specification">{{item.specification}}</td> 
 
     <td ng-if="vm.columnVisiblity.type">{{item.type}}</td> 
 
     </tr> 
 
    </tbody> 
 

 
    </table> 
 
    <a href="#" ng-model="vm.columnVisibility.name" ng-click="vm.columnVisiblity.name=!vm.columnVisiblity.name">TOGGLE NAME</a> 
 

 
    <a href="#" ng-model="vm.columnVisibility.specification" ng-click="vm.columnVisiblity.specification=!vm.columnVisiblity.specification">TOGGLE SPECIFICATION</a> 
 

 
    <a href="#" ng-model="vm.columnVisibility.type" ng-click="vm.columnVisiblity.type=!vm.columnVisiblity.type">TOGGLE TYPE</a> 
 
</body>

Im Grunde mache ich eine Tabelle, deren Spalten sind auf der Grundlage des Objekts columnVisibility sichtbar. Und ich verwende orderby Filter, um die Tabelle zu sortieren.

Quelle

2017-02-14 ChaoticTwist

angular.module('test', []); 
 

 
angular.module("test").controller("sessionCtrl", sessionCtrl); 
 

 

 
function sessionCtrl() { 
 
    var vm = this; 
 
    vm.testvar= "HELLO"; 
 
    vm.sortType = 'name'; 
 
    vm.sortReverse = false; 
 

 
    vm.columnVisiblity = { 
 

 
    name: true, 
 
    specification: true, 
 
    type: true, 
 
    }; 
 
    vm.TableData = [{ 
 

 
    name: "2017/03/01-14", 
 
    specification: "IDB-idb-1wk", 
 
    type: "Full" 
 

 
    }, { 
 

 
    name: "2017/03/01-17", 
 
    specification: "Set-04", 
 
    type: "Full" 
 
    }, { 
 
    name: "2017/03/04-11", 
 
    specification: "IDB-idb-1wk", 
 
    type: "Full" 
 
    }]; 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="sessionCtrl as vm"> 
 
    {{vm.testvar}} 
 
    <table> 
 
    <thead> 
 
     <tr> 
 

 
     <th ng-click="vm.sortType='name'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.name">NAME 
 
     </th> 
 
     <th ng-click="vm.sortType='specification'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.specification">SPECIFICATION 
 
     </th> 
 
     <th ng-click="vm.sortType='type'; vm.sortReverse=!vm.sortReverse" ng-if="vm.columnVisiblity.type">TYPE 
 
     </th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr ng-repeat="item in vm.TableData | orderBy:vm.sortType:vm.sortReverse"> 
 

 
     <td ng-if="vm.columnVisiblity.name">{{item.name}}</td> 
 
     <td ng-if="vm.columnVisiblity.specification">{{item.specification}}</td> 
 
     <td ng-if="vm.columnVisiblity.type">{{item.type}}</td> 
 
     </tr> 
 
    </tbody> 
 

 
    </table> 
 
    <a href="#" ng-model="vm.columnVisiblity.name" ng-click="vm.columnVisiblity.name=!vm.columnVisiblity.name">TOGGLE NAME</a> 
 

 
    <a href="#" ng-model="vm.columnVisiblity.specification" ng-click="vm.columnVisiblity.specification=!vm.columnVisiblity.specification">TOGGLE SPECIFICATION</a> 
 

 
    <a href="#" ng-model="vm.columnVisibility.type" ng-click="vm.columnVisiblity.type=!vm.columnVisiblity.type">TOGGLE TYPE</a> 
 
</div>

Quelle

2017-02-14 09:16:11

Der Tippfehler war, als ich den Code für SO eintippte, mein Elterncode ist groß, also habe ich versucht, ein kleineres Schnipsel zu machen. Der Tippfehler in der Frage wurde korrigiert. Mein ursprünglicher Code hat nicht den Tippfehler – ChaoticTwist

Nein, das Problem ist nicht behoben. In meinem Elterncode habe ich ausführlich nach Tippfehlern gesucht. Das Problem besteht darin, dass das Hinzufügen und Löschen von Spalten in Ordnung ist, die Sortierung jedoch nicht funktioniert. Aber wenn ich den columnVisiblity-Teil entferne, funktioniert das Sortieren wieder gut. – ChaoticTwist

@ChaoticTwist bitte können Sie die Demo sehen. Die Sortierung funktioniert einwandfrei –

Problem ist <a href="#" ng-model="vm.columnVisibility.name" ng-click="vm.columnVisibility.name=!vm.columnVisibility.name">TOGGLE NAME</a> hier Schreibweise columnVisibility doesnt Spiel mit dem im Controller

vm.columnVisiblity = { 

    name: true, 
    specification: true, 
    type: true, 
    };

Es ist ein Tippfehler, korrigieren Sie die Rechtschreibung und es wird

Demo arbeiten: https://jsfiddle.net/m7a74L8f/

Quelle

2017-02-14 09:13:38

Der Tippfehler war, als ich den Code für SO eintippte, mein Elterncode ist groß, also habe ich versucht, einen kleineren Ausschnitt zu machen. Der Tippfehler in der Frage wurde korrigiert. Mein ursprünglicher Code hat nicht den Tippfehler. – ChaoticTwist

Wenn Sie den Tippfehler behoben haben, dann funktioniert Code gut, Sie können die Geige überprüfen. Es wird sortiert und die Spalte –

umgeschaltet. In meinem Elterncode habe ich ausführlich nach Tippfehlern gesucht. Das Problem besteht darin, dass das Hinzufügen und Löschen von Spalten in Ordnung ist, die Sortierung jedoch nicht funktioniert. Aber wenn ich den columnVisiblity-Teil entferne, funktioniert das Sortieren wieder gut. Mein Elterncode verwendet Checkboxen anstelle von Hyperlinks für die Spaltensichtbarkeit, würde das einen Unterschied machen? (Ich weiß, dass die Geige funktioniert, immer noch nicht das Problem herausfinden) – ChaoticTwist

Sortieren einer Tabelle mit dynamisch angezeigten Spalten in AngularJS

Antwort

Verwandte Themen