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

时间:2016-11-10 09:46:48

标签: javascript angularjs

隐藏表列依赖于多个动态json数组中的按钮,当我们单击颜色按钮时我们需要隐藏颜色列(维度检查键中存在颜色值)。我在for循环中创建了动态变量值,在myFunc中试图隐藏列依赖于变量状态。

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

1 个答案:

答案 0 :(得分:0)

您应该使用与头数组$ scope.headers [0] .hide中相同的对象。或在$ scope.data数组中包含头对象。

您还可以更新这两个值

$(document).ready(function () {
    $('.Alaves').click(function () {
        assert( this.getElementsByTagName('input').val);
    });
});