角JS - 顯示/隱藏動態表

Question

的某些行我有一個JSON對象，它看起來像這樣

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

使用此JSON我創建使用NG-重複申報單的列表。下面是代碼：

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

現在，當這個被載入我想隱藏一些基於密鑰名的div，然後所有這些div應顯示當我點擊一個按鈕說（顯示基本）和再應該隱藏，當我點擊一個按鈕說（隱藏基本）

有人可以指點我正確的方向嗎？

感謝

Answer 1

試試這個，它會幫助你

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>