隐藏/显示并展开角度js中的所有按钮

Question

我是 angular js 的新手。很抱歉，如果这个疑问听起来对你们很蹩脚。基本上我有8个表（例如性能和收入），并且与每个表相关联是隐藏/显示按钮。所以每当我点击任何这些按钮时......相应的表应该显示出来。我也有一个展开全部button..which显示所有表格点击时..下面提到的代码工作正常..但我正在寻找一个更好的方法，其中使用的变量数量减少。谢谢：）

HTML：

<button ng-click="expand_all()"></button>
<div>
   <button bs-toggle toggle="show.performance">
   Performance
   </button>
   <table ng-show="show.performance">
      <thead>
         <tr>
            <th>blah1</th>
            <th>blah2</th>
         </tr>
         <tr data-ng-repeat="x in performance.PerformanceDetail">
            <td>{{x.blah1}}</td>
            <td>{{x.blah2}}</td>
         </tr>
      </thead>
   </table >
</div>
<div>
   <button bs-toggle toggle="show.income">
   Income
   </button>
   <table ng-show="show.income">
      <thead>
         <tr>
            <th>blahh1</th>
            <th>blahh2</th>
         </tr>
         <tr data-ng-repeat="x in income.incomedetail">
            <td>{{x.blahh1}}</td>
            <td>{{x.blahh2}}</td>
         </tr>
      </thead>
   </table >
</div>

等不同的表..我有一个返回json数据的服务..我使用该数据在控制器中设置$ scope.income和$ scope.performance！

CODE：

app.controller('controller', function ($scope) {

  $scope.show = {
    performance: false,
    income: false
  };

  $scope.expand_all = function () {
    $scope.show.performance = true;
    $scope.show.income = true;
    //$scope.show=true(then learned abt js prototypical inheritance)
  }
});

f360AngularPOC.directive('bsToggle', function () {
  return {
    restrict: 'A',
    scope: { 
      toggle: '=' 
    },
    link: function ($scope, element, attrs) {
      element.bind('click', function () {
        $scope.$apply(function () {
          $scope.toggle = !$scope.toggle;
        })
      })
    }
  }
});