Hide table columns depend on button in multiple dynamic json array key based in angularjs

Question

Hide table columns depend on button in multiple dynamic json array,when we click on color button we need to hide color column (Color value present in dimensioncheck key). 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,$filter) {
  
  $scope.headers = 
    [{value:"color",hide:false}, 
     {value:"fit",hide:false}, 
     {value:"packagecontents",hide:false},
     {value:"dimdim",hide:false}, 
     {value:"style",hide:false},
     {value:"title",hide:false},
     {value:"wash care",hide:false}
    ];
  
$scope.checkObject=function(object,list){
    /*var myRedObjects = $filter('filter')(list, { prod_value: "dismdim" });
    console.log(myRedObjects);*/
   var value =$filter('filter')(list, { dimensioncheck: object });
  if(value && value.length>0)
    return value[0].hide;
  return null;
  }


 $scope.data = [
    {
    "check1": {
        "condition": true,
        "syntax": 7,
        "prod_value": "dimdim",
        "dimensioncheck": "color"
    },
    "check2": {
        "list": true,
        "prod_value": "Printed",
        "dimensioncheck": "fit"
    },
    "check3": {
        "list": true,
        "prod_value": "Pack of 1",
        "dimensioncheck": "packagecontents"
    },
    "check4": {
        "list": true,
        "prod_value": "Regular",
        "dimensioncheck": "dimdim"
    },
    "check5": {
        "condition": [true, true],
        "syntax": true,
        "prod_value": "White Printed Boxers ",
        "dimensioncheck": "style"
    },
    "check6": {
        "list": "Error in sets",
        "prod_value": "White",
        "dimensioncheck": "title"
    },
    "check7": {
        "syntax": true,
        "prod_value": "Hand Wash Cold Water, Dry Naturally, Do Not Iron Imprint directly, Do not Bleach.",
        "dimensioncheck": "wash care"
    }
}];  
  });

<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.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>

Possible duplicate of Hide table columns depend on button in multiple dynamic json array — karman
– karman, Commented Nov 10, 2016 at 9:52

karman · Accepted Answer · 2016-11-10 10:51:50Z

1

You should use the same object as in header array $scope.headers[0].hide. or incorporate headers object in $scope.data array.

You can also update both values

 $scope.data = [
 {
    "check1": {
      "condition": true,
      "syntax": 7,
      "prod_value": "dimdim",
      "dimensioncheck": "color",
      "hide":false
    }
}]

<div class="colWrapper" ng-hide="inside_values.hide" ng-repeat="(inside_key, inside_values) in val">

<button ng-click="header.hide=!header.hide;$scope.data[0].check1.hide!=$scope.data[0].check1.hide">

answered Nov 10, 2016 at 10:51

karman

3463 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

karman Over a year ago

I have written the pseudo code :). Can you please create fiddle for it.

Collectives™ on Stack Overflow

Hide table columns depend on button in multiple dynamic json array key based in angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related