折叠嵌套的 ng-repeat 创建的 div答案

【问题标题】：Collapse nested ng-repeat created divs折叠嵌套的 ng-repeat 创建的 div
【发布时间】：2016-08-07 18:03:55
【问题描述】：

我正在尝试实现如下图所示的目标。这是我的数据：

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>

目标是，如果您单击任何带下划线的数字，则属于该月的报告会隐藏或显示（可折叠）。那已经完成了。年份也必须发生这种情况 - 当您单击年份时，必须显示/隐藏其中的月份。我已经尝试了很多东西，但似乎我无法弄清楚我需要什么。我在我的代码所在的位置创建了一个 JS BIN。

http://jsbin.com/huhabehoju/edit?html,js,output

任何帮助将不胜感激。谢谢

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

<!DOCTYPE html>
<html ng-app="app">
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

  <meta name="description" content="[groupBy example]"/>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="MainController"> 

   <ul ng-init= "yearhide=false" ng-repeat="(key, value) in Reports | groupBy: 'Year'">
     <li ng-click="yearhide = !yearhide">{{ key }}</li>
      <ul ng-hide="yearhide" ng-repeat="(key1, value1) in value | groupBy: 'Month'">
     <li ng-click="hideo = !hideo">O{{key1}} 
       <ul> 
        <li ng-show="hideo" ng-repeat="p in value1">
   {{p.Name }} 
       </li>
       </ul>
     </li>
    </ul>
   </ul>
  </div>
 </body>
</html>

try this jsbin link,here is demo

【讨论】：

您好，非常感谢，请问可以按降序排列吗？ groupby 按升序排列它们。谢谢

【解决方案2】：

我已经为你创建了一个 jsbin here。
我添加了一个新功能，可以根据您的年份隐藏和显示月份。

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

我看不到你的 toggleShow 方法，所以我假设你已经编写了该方法的逻辑。

【讨论】：

您好，非常感谢，请问可以按降序排列吗？ groupby 按升序排列它们。谢谢

【解决方案3】：

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

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

更新：

orderBy 仅适用于数组，因此首先您需要将其转换为数组。 orderBy 应该是最后一个过滤器，您需要在控制器中添加 filter，以便在控制器中注入 $filter。可以看这个例子

在控制器中：

  $scope.Reports= [];//your daata
  $scope.showReport = {};
  $scope.toggleShow = function (ym) {
      $scope.showReport[ym] = !$scope.showReport[ym];
  };
  $scope.desc = function(arr) {
    return $filter('min')
      ($filter('map')(arr, '-Year')); // descending by year
  };

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

See Plunker Demo

【讨论】：

嗨，我试过这个，除了去年，一切正常，即使他们的月份崩溃了，但今年没有。这是带有您的解决方案的 js bin jsbin.com/niteru/edit?html,js,output
在您的链接中对我来说很好。你能再检查一下吗:)
最好使用[key+key1] 进行第二次重复创建独特的。更新。 :)
您好，可以按降序排列吗？ groupby 按升序排列它们。谢谢
可能但需要一些改变。更新后可能会回答以 desc 显示年份顺序，然后按 asc 显示月份顺序。可以看到更新的部分@GilbertoQuintero