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="[email protected]" 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>
