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

Question

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

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>

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

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

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我已经为你创建了一个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 方法，所以我假设您已经为该方法编写了逻辑。

Answer 2

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

<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

Answer 3

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

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

Collapse nested ng-repeat created divs

javascript

angularjs

ng-repeat

angularjs-ng-repeat