Pratik Pratik - 7 months ago 18
HTML Question

Angular JS - Show/Hide some rows of dynamic table

I have a json Object which looks something like this

{
"entityType": "ABC",
"entityId": "1234",
"transactionId": "fdsfs1234",
"modifiedDate": 1460778320876,
"modifiedBy": "pratik",
"modifyingService": "XYZ",
"modifyingAPI": "update"
}


Using this json i create list of divs using ng-repeat. Here is the code:

<div class="" layout="row" ng-repeat="(key, value) in Detail">
<div layout="row" class="tableDiv">
<div class="fixTdDivKey" ng-if="shouldDisplayKey(key)">
<label>{{key}}</label>
</div>
<div class="fixTdDivValue" ng-if="shouldDisplayValue(key)">
<div class="preDiv">{{value}}</div>
</div>
</div>
</div>


Now When this is loaded I want to hide some of the divs based on the key name and then all these divs should be displayed when I click a button say (Show Basic) and again should get hidden when I click a button say (Hide Basic)

Could some one please point me to right direction?

Thanks

Answer

Try this one, it will help you

var app = angular.module("mainApp", []);

app.controller('mainCtrl', function($scope) {
  $scope.Detail = {
    "entityType": "ABC",
    "entityId": "1234",
    "transactionId": "fdsfs1234",
    "modifiedDate": 1460778320876,
    "modifiedBy": "pratik",
    "modifyingService": "XYZ",
    "modifyingAPI": "update"
  }
  $scope.notToDisplay = ['modifyingAPI', 'modifyingService'];
  $scope.shouldDisplayKey = function(key) {
    return ($scope.notToDisplay.indexOf(key) != -1) ? false : true;
  };
  
  $scope.show = function(key){
    var indexOf = $scope.notToDisplay.indexOf(key);
    if(indexOf != -1){
        $scope.notToDisplay.splice(indexOf, 1);
    }
    else{
      $scope.notToDisplay.push(key);
      }
  };
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <div class="" layout="row" ng-repeat="(key, value) in Detail">
    <div layout="row" class="tableDiv" ng-show="shouldDisplayKey(key)">
      <div class="fixTdDivKey">
        <div class="col-xs-3">{{key}}</div>
        <div class="col-xs-8">:&nbsp;{{value}}</div>
      </div>
    </div>
    
    
  </div>
  <a class="btn btn-info"  ng-click="show('modifyingAPI');">{{shouldDisplayKey('modifyingAPI')?'Hide':'Show'}}</a>
</div>