隐藏表列取决于多个动态json数组中的按钮 [英] Hide table columns depend on button in multiple dynamic json array
本文介绍了隐藏表列取决于多个动态json数组中的按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
隐藏表列取决于多个动态json数组中的按钮，当我们单击颜色按钮时，我们需要隐藏颜色列.我在forF循环中创建了动态变量值，在myFunc中试图根据变量状态隐藏列.
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>推荐答案
我添加了以下内容.
- 在标头中添加了一个名为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数组中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
