AngularJs 重复 html 代码并能够隐藏它的最佳方法

Question

AngularJs 的新手。在我的 html 中，我有两个表格行，它们一遍又一遍地重复和填充。如果我单击第一行上的按钮，我需要第二行出现/消失。这是我的目标中的一些伪的、不完整的角度

<tr ng-repeat-start="item in collection" id="firstTr">
  <td>
    <button type="button" ng-click="toggleTheSecondTr">
        toggle visibility for second tr
    </button>
  <td>
  <td>
    {{item.value}}
  </td>
</tr>
<tr ng-Hide="the above button got clicked" id="secondTr" ng-repeat-end>
  <td>
     something goes here, there can be many td's
  </td>
  <td>
    {{item.someOtherValue}}
  </td>
</tr>

这段代码会一遍又一遍地重复。但是，我需要以一种方式绑定按钮，当单击按钮时，第二行被隐藏，或者如果再次单击，它会再次显示，几乎就像一个拨动开关。我不知道该怎么做。我可以使用后面的 typescript 代码中的变量来跟踪它（我们使用的是 typescript，而不是 js），但我无法保证这两行将重复多少次，因此不知道要跟踪多少变量。关于如何解决我的问题的建议？

编辑：例如，我本质上希望功能与此页面中的表格非常相似，但我的行数是可变的，可以是一个或多个https://www.visualstudio.com/vs/compare/

Answer 1

解决方案如下：
在集合的每个对象中使用布尔变量来显示或隐藏其各自部分中的第二个 <tr>：

angular.module('MyApp', [])
  .controller('MyController', ['$scope', function($scope){
    $scope.collection = [];
    $scope.collection.push({value:'Test', someOtherValue:'UAT', hideSecondRow: false});
    $scope.collection.push({value:'Dev', someOtherValue:'Development', hideSecondRow: true});
    $scope.collection.push({value:'Prod', someOtherValue:'PreProd', hideSecondRow: false});
    $scope.toggleTheSecondTr = function(index){
      $scope.collection[index].hideSecondRow = !$scope.collection[index].hideSecondRow;
    }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyController">
    <table>
      <tr ng-repeat-start="item in collection" id="firstTr">
        <td>
          <button type="button" ng-click="toggleTheSecondTr($index)">
              toggle visibility for second tr
          </button>
        <td>
        <td>
          {{item.value}}
        </td>
      </tr>
      <tr ng-hide="item.hideSecondRow" id="secondTr" ng-repeat-end>
        <td>
           something goes here, there can be many td's
        </td>
        <td>
          {{item.someOtherValue}}
        </td>
      </tr>
    </table>
  </div>
</div>