Javascript 折叠嵌套的ng重复创建的div

我正在努力实现下面的图像。这是我的数据：

JS:

angular.module('app', ['angular.filter'])
    .controller('MainController', function($scope) { 

    $scope.showReport = {};
    $scope.toggleShow = function (ym) {
        $scope.showReport[ym] = !$scope.showReport[ym];
    };

    $scope.Reports = [
        { Id: 1, Name: 'Report One', Year: 2016, Month: 5 },
        { Id: 2, Name: 'Report Core', Year: 2016, Month: 5 },
        { Id: 3, Name: 'Report Alpha', Year: 2016, Month: 3 },
        { Id: 4, Name: 'Report Moon', Year: 2015, Month: 5 },
        { Id: 5, Name: 'Report Sky', Year: 2015, Month: 2 }
    ];
});

HTML:

<ul ng-repeat="(key, value) in Reports | groupBy: 'Year'">
    {{ key }}
    <ul ng-repeat="(key1, value1) in value | groupBy: 'Month'">
        <a ng-click="toggleShow(key+key1)"> O{{key1}} </a>
        <li ng-repeat="p in value1" ng-if="!showReport[key+key1]">
            {{p.Name }} 
        </li>
    </ul>
</ul>

{{key}}


任何帮助都将不胜感激。谢谢
我为您创建了一个jsbin。

我添加了一个新功能，可以根据您的年数隐藏和显示月份

$scope.showYears = {};
  $scope.toggleYear = function(year) {
    if ($scope.showYears[year] === undefined || $scope.showYears[year] === null)
      $scope.showYears[year] = false;
    else $scope.showYears[year] = !$scope.showYears[year];

  }
  $scope.showMonth = function(month, year) {
    if ($scope.showYears[year] === undefined || $scope.showYears[year] === null)
      return true;
    return $scope.showYears[year];
  }

HTML一直保持为

<ul ng-repeat="(key, value) in Reports | groupBy: 'Year'">
  <div ng-click="toggleYear(key)">YEAR - {{ key }}</div>
  <ul ng-repeat="(key1, value1) in value | groupBy: 'Month'" ng-show="showMonth(key1, key)">
<a ng-click="toggleShow(key+key1)"> MONTH - {{key1}} </a>
<li ng-repeat="p in value1" ng-if="!showReport[key+key1]">
     {{p.Name }} 
 </li>
</ul>
</ul>


年份-{key}

月份-{{key1}




我看不到您切换Show方法，因此我假设您已经为该方法编写了逻辑。
我已经为您创建了一个jsbin。

我添加了一个新功能，可以根据您的年数隐藏和显示月份

$scope.showYears = {};
  $scope.toggleYear = function(year) {
    if ($scope.showYears[year] === undefined || $scope.showYears[year] === null)
      $scope.showYears[year] = false;
    else $scope.showYears[year] = !$scope.showYears[year];

  }
  $scope.showMonth = function(month, year) {
    if ($scope.showYears[year] === undefined || $scope.showYears[year] === null)
      return true;
    return $scope.showYears[year];
  }

HTML一直保持为

<ul ng-repeat="(key, value) in Reports | groupBy: 'Year'">
  <div ng-click="toggleYear(key)">YEAR - {{ key }}</div>
  <ul ng-repeat="(key1, value1) in value | groupBy: 'Month'" ng-show="showMonth(key1, key)">
<a ng-click="toggleShow(key+key1)"> MONTH - {{key1}} </a>
<li ng-repeat="p in value1" ng-if="!showReport[key+key1]">
     {{p.Name }} 
 </li>
</ul>
</ul>


年份-{key}

月份-{{key1}




我看不到您切换Show方法，因此我假设您已经为该方法编写了逻辑。
可以尝试此方法，无需在控制器中添加任何函数

<div>
   <ul ng-repeat="(key, value) in Reports | groupBy: 'Year'"  >
      <span ng-click="hideGroup[key] = !hideGroup[key]" style="cursor:pointer;">{{ key }}- {{value.show}}</span>
      <ul ng-hide="hideGroup[key]"  ng-repeat="(key1, value1) in value | groupBy: 'Month'">
         <span ng-click="hideGroup[key+key1] = !hideGroup[key+key1]" style="cursor:pointer;">O{{key1}}</span> 
         <li ng-hide="hideGroup[key+key1]" ng-repeat="p in value1">
            {{p.Name }} 
         </li>
      </ul>
  </ul>
</div>

在Html中：

<ul ng-repeat="reports in Reports | groupBy: 'Year' | toArray:true | orderBy:desc">
     <li><span ng-click="toggleShow(reports[0].Year)" style="cursor:pointer">{{ reports[0].Year }}</span></li>
     <ul ng-hide="showReport[reports[0].Year]" ng-repeat="items in reports | groupBy: 'Month'">
          <li><span ng-click="toggleShow(reports[0].Year+items[0].Month)" style="cursor:pointer">O{{items[0].Month}} </span>
               <ul ng-hide="showReport[reports[0].Year+items[0].Month]"> 
                   <li  ng-repeat="item in items">
                           {{item.Name }} 
                   </li>
               </ul>
          </li>
     </ul>
</ul>


{{报告[0]。年份}

O{{items[0]。月份}


{{item.Name}






可以尝试此功能，无需在控制器中添加任何功能

<div>
   <ul ng-repeat="(key, value) in Reports | groupBy: 'Year'"  >
      <span ng-click="hideGroup[key] = !hideGroup[key]" style="cursor:pointer;">{{ key }}- {{value.show}}</span>
      <ul ng-hide="hideGroup[key]"  ng-repeat="(key1, value1) in value | groupBy: 'Month'">
         <span ng-click="hideGroup[key+key1] = !hideGroup[key+key1]" style="cursor:pointer;">O{{key1}}</span> 
         <li ng-hide="hideGroup[key+key1]" ng-repeat="p in value1">
            {{p.Name }} 
         </li>
      </ul>
  </ul>
</div>

在Html中：

<ul ng-repeat="reports in Reports | groupBy: 'Year' | toArray:true | orderBy:desc">
     <li><span ng-click="toggleShow(reports[0].Year)" style="cursor:pointer">{{ reports[0].Year }}</span></li>
     <ul ng-hide="showReport[reports[0].Year]" ng-repeat="items in reports | groupBy: 'Month'">
          <li><span ng-click="toggleShow(reports[0].Year+items[0].Month)" style="cursor:pointer">O{{items[0].Month}} </span>
               <ul ng-hide="showReport[reports[0].Year+items[0].Month]"> 
                   <li  ng-repeat="item in items">
                           {{item.Name }} 
                   </li>
               </ul>
          </li>
     </ul>
</ul>


{{报告[0]。年份}

O{{items[0]。月份}


{{item.Name}







JS-Bin

{{key}

O{{{key1}


{{p.Name}}







JS-Bin

{{key}

O{{{key1}


{{p.Name}}






嗨，我试过这一次，除了去年，一切都正常，甚至他们的月份也崩溃了，但今年不行。这是js-bin，在你的链接中有你的解决方案，对我来说很好。您是否可以再次检查：）最好使用
[key+key1]
进行第二次重复创建唯一。更新日期：）您好，可以按降序排列吗？groupby按升序排列。谢谢，但需要一些改变。更新后的订单可能会按desc显示年订单，然后按asc显示月订单。可以看到更新的部分@GilbertoQuinteroHi，我试过这个，除了去年，一切都正常，甚至他们的月份都崩溃了，但今年没有。这是js-bin，在你的链接中有你的解决方案，对我来说很好。您是否可以再次检查：）最好使用
[key+key1]
进行第二次重复创建唯一。更新日期：）您好，可以按降序排列吗？groupby按升序排列。谢谢，但需要一些改变。更新后的订单可能会按desc显示年订单，然后按asc显示月订单。可以看到更新的部分@GilbertoQuinteroHi非常感谢，可以按降序排列吗？groupby按升序排列。谢谢，非常感谢，可以降序订购吗？groupby按升序排列。谢谢，非常感谢，可以降序订购吗？groupby按升序排列。谢谢，非常感谢，可以降序订购吗？groupby按升序排列。谢谢