Question

隐藏表格列取决于多个动态json数组中的按钮，当我们点击颜色按钮时我们需要隐藏颜色列。 我在for循环中创建了动态变量值，在myFunc中试图隐藏列依赖于变量状态。

＆＃13;

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."
    }
}];  
  });

＆＃13;

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

＆＃13;

Answer 1

以下事项，我补充说。

在标题中添加了一个名为hide的属性。要知道是否需要隐藏或显示。这可以是任何名称。
在列数据中，使用标题检查键值。
使用过滤器获取标题中的特定对象。
如果匹配，则返回hide属性以了解是否需要隐藏或显示。

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>

隐藏表列依赖于多个动态json数组中的按钮

1 个答案: