AngularJS重复HTML代码具有隐藏功能的最佳方法

Question

gangularjs的新事物。在我的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而不是JS(跟踪它，但是我对这两行的重复几次没有Gaurantee，因此不知道要跟踪多少变量。有关如何解决我的问题的建议？

编辑：例如，我本质上希望该功能与此页面中的表非常相似，但是我的行数是可变的，它可以是一个或多个https://www.visalstudio.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>