隐藏和显示子部分

Question

我有包含章节和子章节的菜单，如下所示：

Section 1
   Sub 1.1
   Sub 1.2
Section 2
   Sub 2.1
   Sub 2.2

我想通过点击部分隐藏子部分并显示其中一部分（点击第2部分）：

Section 1
Section 2
   Sub 2.1
   Sub 2.2

这是我的代码和JSFiddle：

<div ng-controller="MyCtrl">
  <div ng-repeat="(meta, counts) in info">
      <a href="#" ng-click="display(meta)">{{ meta }}</a>
      <ul class="subsection">
          <li ng-repeat="(group, cnt) in counts"> 
              {{ group }} 
          </li>
      </ul>
  </div>
</div>

控制器：

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.info = { "one": { "a": 1, "b": 2 },
                   "two" : { "c": 3, "d": 4 }};

    $scope.display = function(meta) {
        // ????
    };
}

CSS：

ul.subsection {
    display: none;
}

如何通过单击该部分来修复此代码以显示其中一个子部分？

更新：我修复了JSFiddle

上的链接

Answer 1

由于ng-repeat创建了自己的范围，您只需在循环中切换变量，并对该变量使用ng-show：

<div ng-repeat="(meta, counts) in info">
  <a href="#" ng-click="display = !display">{{ meta }}</a>
  <ul class="subsection" ng-show="display">
      <li ng-repeat="(group, cnt) in counts"> 
          {{ group }} 
      </li>
  </ul>
</div>

编辑：如果您一次只能显示一个功能，那么您可以使用功能在原始代码中执行您尝试执行的操作：

<div ng-repeat="(meta, counts) in info">
  <a href="#" ng-click="display($index)">{{ meta }}</a>
  <ul class="subsection" ng-show="sectionIndex == $index>
      <li ng-repeat="(group, cnt) in counts"> 
          {{ group }} 
      </li>
  </ul>
</div>

$scope.display = function(index) {
    $scope.sectionIndex = index;
}

Answer 2

您可以简单地执行以下操作：

<div ng-repeat="(meta, counts) in info">
    <a href="#" ng-click="$parent.display = meta">{{meta}}</a>
    <ul class="subsection" ng-show="$parent.display == meta">
        <li ng-repeat="(group, cnt) in counts">
            {{ group }}
        </li>
    </ul>
</div>

注意，您可以引用$parent范围以避免本地范围display属性。

在这种情况下，您不需要CSS规则。奖励点是您可以在控制器$scope.display = 'two'中设置，第二项将展开。

然而，更清洁的方法是使用@tymeJV所展示的控制器功能，这是最好的方法。

演示：http://plnkr.co/edit/zXeWjXLGHMv0BZZRZtud?p=preview