在AngularJS中使用動態顯示的列對錶格進行排序

-1

我想要創建一個具有排序功能的表格以及一個用於選擇要顯示哪些列的按鈕。
這兩個功能在單獨使用時都有效，但在嘗試將它們一起使用時會失敗。在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>

基本上我做一個表，其列在columnVisibility對象的基礎上可見。而我正在使用orderby過濾器對錶格進行排序。

來源

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>

來源

2017-02-14 09:16:11

錯字是當我爲SO輸入代碼時，我的父代碼很大，所以我試圖做出更小的片段。修正了問題中的錯字。我的原始代碼沒有錯字 – ChaoticTwist

不，這個問題沒有解決。在我的父母代碼中，我廣泛檢查了錯別字。問題是，雖然列的添加和刪除工作正常，但排序不起作用。但是，如果我刪除columnVisiblity部分，排序再次正常工作。 – ChaoticTwist

@ChaoticTwist請看演示。排序工作正常 –

問題是<a href="#" ng-model="vm.columnVisibility.name" ng-click="vm.columnVisibility.name=!vm.columnVisibility.name">TOGGLE NAME</a>這裏，在控制器的columnVisibility犯規匹配拼寫

vm.columnVisiblity = { 

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

這是打錯了，正確的拼寫，也將努力

演示：https://jsfiddle.net/m7a74L8f/

來源

2017-02-14 09:13:38

錯字是當我鍵入代碼爲SO時，我的父代碼很大，所以我試圖做出更小的代碼片段。修正了問題中的錯字。我原來的代碼沒有錯字。 – ChaoticTwist

如果你修正了錯字，那麼代碼工作正常，你可以檢查小提琴。這是排序以及切換列 –

在我的父母代碼中，我已經廣泛檢查了拼寫錯誤。問題是，雖然列的添加和刪除工作正常，但排序不起作用。但是，如果我刪除columnVisiblity部分，排序再次正常工作。我的父母代碼使用複選框，而不是超鏈接列可見性，會有什麼區別？（我知道小提琴能正常工作，仍然無法解決問題） – ChaoticTwist

在AngularJS中使用動態顯示的列對錶格進行排序

回答

相關問題