user6701603 user6701603 - 3 months ago 22
AngularJS Question

Hide table columns depend on button in multiple dynamic json array

Hide table columns depend on button in multiple dynamic json array,when we click on color button we need to hide color column.
I have created dynamic variable values in for loop,in myFunc trying to hide columns depend on variable status.



var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.headers = ["color", "fit", "package contents","sku", "style", "title","wash care"];
for(var i = 0; i < $scope.headers.length -1; i++)
{
$scope[$scope.headers[i]] = true;
}
$scope.myFunc = function(headerValue){
console.log("before: "+$scope[headerValue]);
if($scope[headerValue] === true)
$scope[headerValue] = false;
else if($scope[headerValue] === false)
$scope[headerValue] = true;
}
$scope.data = [{
"sku": {
"condition": true,
"syntax": 7,
"prod_value": "AT947MA04ETZINDFAS"
},
"style": {
"list": true,
"prod_value": "Printed"
},
"package contents": {
"list": true,
"prod_value": "Pack of 1"
},
"fit": {
"list": true,
"prod_value": "Regular"
},
"title": {
"condition": [true, true],
"syntax": true,
"prod_value": "White Printed Boxers "
},
"color": {
"list": "Error in sets",
"prod_value": "White"
},
"wash care": {
"syntax": true,
"prod_value": "Hand Wash Cold Water, Dry Naturally, Do Not Iron Imprint directly, Do not Bleach."
}
}];
});

<html >
<head>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<table class="dataTable" border="1" >
<tr>
<th ng-if="cc" ng-repeat = "cc in headers">{{cc}}</th>
</tr>
<tr ng-repeat="current in data">
<td ng-if="key" ng-repeat="(key, val) in current">
<div class="colWrapper" ng-repeat="(inside_key, inside_values) in val">
<span>{{inside_values}}</span>
</div>
</td>
</tr>
</table><br>
<span>
<div ng-repeat="header in headers">
<button ng-click="header">{{header}}</button>
</div>
</span>
</body>
</html>




Answer

Answer

The following things, I have added.

  1. Added a property in header called hide. To know whether need to hide or show. This can be in any name.
  2. In the coloumns data, checked the key value with the headers.
  3. Used filter to get the specific object in the header.
  4. If it is matched, then returned hide property to know whether need to hide or show.

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$filter) {
  debugger
  $scope.headers = 
    [{value:"color",hide:false}, 
     {value:"fit",hide:false}, 
     {value:"package contents",hide:false},{value:"sku",hide:false}, 
     {value:"style",hide:false}, {value:"title",hide:false},
     {value:"wash care",hide:false}
    ];
  
$scope.checkObject=function(object,list){
   var value =$filter('filter')(list, {value:object},true);
  if(value && value.length>0)
    return value[0].hide;
  return null;
  }

 $scope.data = [{
    "sku": {
        "condition": true,
        "syntax": 7,
        "prod_value": "AT947MA04ETZINDFAS"
    },
    "style": {
        "list": true,
        "prod_value": "Printed"
    },
    "package contents": {
        "list": true,
        "prod_value": "Pack of 1"
    },
    "fit": {
        "list": true,
        "prod_value": "Regular"
    },
    "title": {
        "condition": [true, true],
        "syntax": true,
        "prod_value": "White Printed Boxers "
    },
    "color": {
        "list": "Error in sets",
        "prod_value": "White"
    },
    "wash care": {
        "syntax": true,
        "prod_value": "Hand Wash Cold Water, Dry Naturally, Do Not Iron Imprint directly, Do not Bleach."
    }
}];  
  });
<html >
  <head>
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
  </head>
  <body ng-app="plunker" ng-controller="MainCtrl">
   <table class="dataTable" border="1" >
     <tr>
       <th ng-if="!cc.hide" ng-repeat = "cc in headers">{{cc.value}}
       </th>
    </tr>
     <tr ng-repeat="current in data">
         <td ng-if="!checkObject(key,headers)" ng-repeat="(key, val) in current">
        <div class="colWrapper" ng-repeat="(inside_key, inside_values) in val">
          <br/>
          <span>{{inside_values}}</span>
           </div>
       </td>
     </tr> 
</table><br>
<span>
    <div ng-repeat="header in headers">
   <button ng-click="header.hide=!header.hide"><span ng-if="header.hide">Show </span><span ng-if="!header.hide">Hide </span>{{header.value}}
      </button>
   </div>
</span>
  </body>
  </html>