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


hide table columns depend on button in multiple dynamic json array,when click on color button need hide color column (color value present in dimensioncheck key). have created dynamic variable values in loop,in myfunc trying 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, not iron imprint directly, not bleach.",          "dimensioncheck": "wash care"      }  }];      });
<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>

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

you can 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"> 

Comments

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -