用AngularJS中动态显示的列对表进行排序
[英]Sorting a table with dynamically shown columns in AngularJS
问题描述
我正在尝试制作一个具有排序以及选择要显示的列的按钮的表。
当单独使用这些功能时，它们都可以工作，但是当我尝试将它们一起使用时，它们将失败。
JS
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过滤器对表格进行排序。
2 个解决方案
解决方案1
2 2017-02-14 09:13:38
问题是<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,
};
这是一个输入错误，请纠正拼写，它将起作用
解决方案2
1 已采纳 2017-02-14 09:16:11
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>
数据表-当未显示所有列时如何禁用对表中最后一列的排序
[英]Datatables - how to disable sorting on last column in a table when not all columns are shown
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.