Angular JS - 显示/隐藏一些动态表行

Question

我有一个看起来像这样的 json 对象

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

使用这个 json，我使用 ng-repeat 创建 div 列表。代码如下：

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