Sorting a table with dynamically shown columns in AngularJS

Question

I am trying to make a table which has sorting as well as a button to select which columns are to be displayed.
Both these features work when used alone but fail when I try to use them together.

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>

Basically I'm making a table whose columns are visible on the basis of the columnVisibility object. And I'm using orderby filter to sort the table.

score 2 · Answer 1 · answered Feb 14 '17 at 09:13

2

Problem is <a href="#" ng-model="vm.columnVisibility.name" ng-click="vm.columnVisibility.name=!vm.columnVisibility.name">TOGGLE NAME</a> here spelling of columnVisibility doesnt match with that in controller

 vm.columnVisiblity = {

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

It is a typing mistake, correct the spelling and it will work

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

answered Feb 14 '17 at 09:13

Mohd Asim Suhail

2,176
1
16
23

The typo was when I typed the code for SO, my parent code is big so I tried to make a smaller snippet. Fixed the typo in the question. My original code doesnt have the typo. – ChaoticTwist Feb 14 '17 at 09:18
If you fixed the typo, then code is working fine, you can check the fiddle. It is sorting as well as toggling column – Mohd Asim Suhail Feb 14 '17 at 09:23
In my parent code, I've extensively checked for typos. The issue is that while addition and deletion of column works okay, the sorting isn't working. But if I remove the columnVisiblity part, sorting works fine again. My parent code uses checkboxes instead of hyperlinks for column visiblity, would that make any difference? (I know that the fiddle works correctly, still can't figure out the issue) – ChaoticTwist Feb 14 '17 at 09:25
It won't make any difference if you use checkbox also, because on ng-click you are giving the same code, i am feeling there is no problem in this part of code, something else is messing up the code. – Mohd Asim Suhail Feb 14 '17 at 09:32
I figure the same. It is a large application. I'll look into what else could be the issue. Thanks :) – ChaoticTwist Feb 14 '17 at 09:34
I use $scope in my parent code instead of using "controller as" , would that make difference? – – ChaoticTwist Feb 14 '17 at 09:43
As far as i know It won't make a difference. – Mohd Asim Suhail Feb 14 '17 at 09:45

Naghaveer R · Accepted Answer · 2017-02-14T09:25:56.467

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>

The typo was when I typed the code for SO, my parent code is big so I tried to make a smaller snippet. Fixed the typo in the question. My original code doesnt have the typo — ChaoticTwist, Feb 14 '17 at 09:18
No, the issue isn't fixed. In my parent code, I've extensively checked for typos. The issue is that while addition and deletion of column works okay, the sorting isn't working. But if I remove the columnVisiblity part, sorting works fine again. — ChaoticTwist, Feb 14 '17 at 09:22
@ChaoticTwist please can see the demo. The sorting is working fine — Naghaveer R, Feb 14 '17 at 09:25
I realized that too. I guess there's some other issue over there unrelated to this part. My code is a part of a larger application, so it could be other components, I'll look into it. Thanks. — ChaoticTwist, Feb 14 '17 at 09:27
I use $scope in my parent code instead of using "controller as" , would that make difference? — ChaoticTwist, Feb 14 '17 at 09:42
@ChaoticTwist It will not make any difference. You can find detailed explanation here http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers — Naghaveer R, Feb 14 '17 at 09:47

Sorting a table with dynamically shown columns in AngularJS

2 Answers2