在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中使用动态显示的列对表格进行排序

回答

相关问题