Question

AngularJs的新手。在我的html中，我有两个表行重复并一遍又一遍地填充。如果我单击第一行上的按钮，我需要第二行显示/消失。这是我所瞄准的一些伪ish，不完整的角度

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

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

1 个答案: