隐藏和显示小节 [英] Hide and Display Subsections

问题描述

我有菜单，章节和小节，像这样的：

I have menu with sections and subsections, like this:

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

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

I want to hide subsections and show one of them by clicking on section (click on Section 2):

Section 1
Section 2
   Sub 2.1
   Sub 2.2

下面是我的code和的jsfiddle ：

Here is my code and 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;
}

我怎样才能解决这个code。通过点击部分以显示第一个？

How can I fix this code to show one of the subsection by click on the section ?

更新：我固定在的jsfiddle

推荐答案

由于 NG-重复创建自己的范围，你可以简单地切换循环内的变量，使用 NG-节目该变量：

Since ng-repeat creates its own scope, you can simply toggle a variable within the loop, and use ng-show on that variable:

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

编辑：如果你只能一次显示一个函数，那么你可以做你试图在你原来的code做的一个功能：

If you can only show one function at a time, then you can do what you were trying to do in your original code with a function:

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

这篇关于隐藏和显示小节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！