如何在angularjs中手动展开和折叠答案

【问题标题】：How to make expand and collapse manually child wise in angularjs如何在angularjs中手动展开和折叠
【发布时间】：2018-07-12 07:44:03
【问题描述】：

我有一个手风琴展开工作正常但折叠不工作，它应该像手风琴一样工作，例如，当我点击“标题 2”时，它的内容应该展开，“标题 1”的内容应该折叠。下面是我的代码，我是 angularjs 的新手。任何人都可以帮助我。如果它在 jquery 中也可以。

HTML

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
 <body ng-app="app">
    <h1>Dynamic accordion: nested lists with html markup</h1>   
  <div ng-controller="AccordionDemoCtrl">
    <div>
      <div  ng-repeat="group in groups">
        <div class="parents"  ng-click="item=1"><i class="glyphicon-plus"></i> {{ group.title }}        
        </div>
        {{ group.content }}
        <ul class="childs" ng-show="item==1">
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>        
      </div>
    </div>
  </div>
  </body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script  src="js/index.js"></script>

index.js

angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
angular.module('app').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'title 1',

      isOpen: true,
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a']
    },
    {
      title: 'title 2',

      list: ['item1b',
        '<b>item2b </b> blah ',
        'item3b'] 
    },
    {
      title: 'title 3',

    },
    {
      title: 'title 4',

    },
    {
      title: 'title 5',

    }
  ];

});

【问题讨论】：

标签： angularjs accordion

【解决方案1】：

我建议你这些功能：

  $scope.open = function (index) {
    $scope.groups[index].isOpen = !$scope.groups[index].isOpen;
    $scope.closeOthers(index);
  }

  $scope.closeOthers = function (index) {
    for(var i = 0; i  < $scope.groups.length; i++) {
       if (i !== index)
        $scope.groups[i].isOpen = false;
    }
  }

open 在单击父对象时被触发，closeOthers 在open 中被调用。我向父母初始化了一个visible 布尔值。每次用户点击父级时，它会将visible 设置为true，将其他设置为false。

<div ng-controller="AccordionDemoCtrl">
    <div>
      <div  ng-repeat="group in groups track by $index">
        <div class="parents"  ng-click="open($index)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}        
        </div>
        {{ group.content }}
        <ul class="childs" ng-show="group.isOpen">
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>        
      </div>
    </div>
  </div>

Working demo

【讨论】：

感谢您的回答是否可以在展开和折叠时互换“+”图标和“-”图标
是的，当然，你必须在你的图标上添加一个ngClass 指令，并观察 isOpen 值。编辑答案
感谢您的回答。是否可以不使用来自 ng repeat 的一个或多个组
你不能。 isOpen 是来自 group 的属性