Question

因此，我有一个表格需要显示父级交易，在ng-show（单击父级交易）上，我想显示子级交易。

<table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">No_Of_Orders</th>
      <th scope="col">Size</th>
      <th scope="col">Book_Size</th>
      <th scope="col">Remarks</th>
      <th scope="col">Price_Guidance</th>
      <th scope="col">CONTROL</th>
      <th scope="col">Status</th>
      <th scope="col">Current_Cut_Off</th>
      <th scope="col">Tenor</th>
      <th scope="col">Book</th>
      <th scope="col">ORDCOLUMN</th>
      <th scope="col">PKEY</th>
      <th scope="col">Save</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="parentDeal in parentDeals track by $index" ng-click="childShow(parentDeal.PKEY)">
        <td>{{parentDeal.Name}}</td>
        <td>{{parentDeal.No_Of_Orders}}</td>
        <td>{{parentDeal.Size}}</td>
        <td>{{parentDeal.Book_Size}}</td>
        <td>{{parentDeal.Remarks}}</td>
        <td>{{parentDeal.Price_Guidance}}</td>
        <td>{{parentDeal.CONTROL}}</td>
        <td>{{parentDeal.Status}}</td>
        <td>{{parentDeal.Current_Cut_Off}}</td>
        <td>{{parentDeal.Tenor}}</td>
        <td>{{parentDeal.Book}}</td>
        <td>{{parentDeal.ORDCOLUMN}}</td>
        <td>{{parentDeal.PKEY}}</td>
        <td>{{parentDeal.Save}}</td>

    <tr ng-repeat="childDeal in childDeals track by $index" ng-show = "childRowShow_{{childDeal.PKEY}}">
        <td>{{childDeal.Name}}</td>
        <td>{{childDeal.No_Of_Orders}}</td>
        <td>{{childDeal.Size}}</td>
        <td>{{childDeal.Book_Size}}</td>
        <td>{{childDeal.Remarks}}</td>
        <td>{{childDeal.Price_Guidance}}</td>
        <td>{{childDeal.CONTROL}}</td>
        <td>{{childDeal.Status}}</td>
        <td>{{childDeal.Current_Cut_Off}}</td>
        <td>{{childDeal.Tenor}}</td>
        <td>{{childDeal.Book}}</td>
        <td>{{childDeal.ORDCOLUMN}}</td>
        <td>{{childDeal.PKEY}}</td>
        <td>{{childDeal.Save}}</td>
    </tr>
    </tr>
  </tbody>
</table>

这是基本数据：-

$scope.allDeals = [
          {
             "ORDCOLUMN":"2017-11-17T05:00:00.000000000Z",
             "CONTROL":"N",
             "PKEY":"UD0000000000720",
             "Name":"rajat10 10:19",
             "Tenor":"0Y",
             "Size":0,
             "Price_Guidance":"43%",
             "Remarks":"-",
             "Book_Size":20,
             "Status":"Open",
             "No_Of_Orders":2,
             "Current_Cut_Off":2.3,
             "Book":"Book@ReOffer",
             "Save":"Edit"
          },
          {
             "ORDCOLUMN":"2017-11-17T05:00:00.000000000Z",
             "CONTROL":"Y",
             "PKEY":"UD0000000000720",
             "Name":"rajat10 10:19",
             "Tenor":"Multi  ...",
             "Size":0,
             "Price_Guidance":"-",
             "Remarks":"-",
             "Book_Size":20,
             "Status":" Open",
             "No_Of_Orders":2,
             "Current_Cut_Off":2.3,
             "Book":"Book@ReOffer",
             "Save":"Edit"
          },
          {
             "ORDCOLUMN":"2017-11-17T05:00:00.000000000Z",
             "CONTROL":"N",
             "PKEY":"UD0000000000720",
             "Name":"rajat10 10:19",
             "Tenor":"Perp",
             "Size":0,
             "Price_Guidance":"19%",
             "Remarks":"-",
             "Book_Size":0,
             "Status":"Open",
             "No_Of_Orders":2,
             "Current_Cut_Off":2.3,
             "Book":"Book@ReOffer",
             "Save":"Edit"
          }
....and so on
       ]

因此，此数据可以按PKEY分组，并且父对象具有控件-“ Y”，子对象具有控件-“ N”。注意：-可能存在只有父交易而没有子交易的对象。

在我的app.js中：-

$scope.parentDeals = $scope.allDeals.filter(function (item,index) { 
    return item.CONTROL == "Y";
});

$scope.childDeals = [];
$scope.childShow = function (PKEY) {
    if($scope["childRowShow_"+PKEY]){
        $scope["childRowShow_"+PKEY] = false;
    }
    else{
        $scope.childDeals = $scope.allDeals.filter(function (item,index) {
            if(item.PKEY == PKEY && item.CONTROL == "N"){
                return item;
            }
        });
        $scope["childRowShow_"+PKEY] = true;    
    }            
};

在这里，我要制作两个数组：-parentDeals和childDeals。现在，我在另一行上应用ng-repeat，因此在所有父项交易之后都会显示子项交易。我有什么办法可以在各自的母公司交易下方显示它们，或者可以应用其他解决方案？

Answer 1

是的，使用ng-repeat-start和ng-repeat-end，我们可以显式指定ng-repeat的开始和结束。因此，我们可以在任何两个DOM元素上指定ng-repeat-start和ng-repeat-end，而不是在单个DOM元素上使用ng-repeat指令。例如。

<div ng-app="app">
    <table ng-controller="TestController">
        <tr ng-repeat-start="d in data">
            <td><strong>{{d.name}}</strong></td>
        </tr>
        <tr ng-repeat-end>
            <td>{{ d.info }}</td>
        </tr>
    </table>
</div>
<script>
var app = angular.module('app', []);

app.controller('TestController', function ($scope) {
    $scope.data = [{
        name: 'ABC',
        info: 'Bangalore'
    }, {
        name: 'XYZ',
        info: 'Mumbai'
    }];
});
</script>

如何在表格上的ng-repeat中折叠和隐藏？

1 个答案: