Angular JS - Show/Hide some rows of dynamic table

Question

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

I am not getting how can I achieve this , hide some divs based on key of json — Pratik
– Pratik, Commented Apr 28, 2016 at 7:01

byteC0de · Accepted Answer · 2016-04-28 07:28:07Z

1

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>

edited Apr 28, 2016 at 7:28

answered Apr 28, 2016 at 7:07

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pratik Over a year ago

Thanks for responding. And how about the other part where I want to show the hidden row on a button click, Basically I want to have 2 buttons where one should show the hidden one and the other one should hide it again

byteC0de Over a year ago

@Pratik pls check it now

Collectives™ on Stack Overflow

Angular JS - Show/Hide some rows of dynamic table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related