如何使用 Angular.js 展开和折叠 div答案

【问题标题】：How to expand and collapse div using Angular.js如何使用 Angular.js 展开和折叠 div
【发布时间】：2019-05-04 05:40:58
【问题描述】：

我需要在单击链接时展开 div 元素并使用 Angular.js 折叠它。我在下面提供我的代码。

<a class="collapsed panel-title sky-blue-light" role="button" data-toggle="collapse"  href="#" aria-expanded="true" style="border-bottom:none;" ng-click="showSubDiv();">
AAC1 - The organisation defines and displays the healthcare services that it can provide

<div class="smbtn btn"  data-toggle="confirmation"  data-placement="top"><i class="fa fa-check" aria-hidden="true"></i></div>
<div class="smbtn status amberbg" data-toggle="tooltip" title="Work in Progress"><i class="fa fa-hourglass-o" aria-hidden="true"></i></div>
<div class="descriptionlink smbtn btn" data-toggle="tooltip" title="Description"><i class="fa fa-question" aria-hidden="true"></i></div>
<div class="clear"></div>
</a>

当用户点击这个锚链接时，下面的部分会展开，当再次点击时它会折叠。

<div id="inner1collapsea-5-1" class="panel-collapse collapse" ng-show="showsubdiv">
<div class="panel-body padding0" style="border-top:none;">
  <div class="panel-group popup-accordian accordioninner accordioninner-inner">
<div class="panel panel-default" style="border:1px solid #66afe9;">
<div class="panel-heading">
<a class="panel-title sky-blue-light auditformpopup" role="button" ui-sref="subclause">
AAC1-A - The services being provided are clearly defined. The healthcare services being provided are clearly defined and are in consonance with the needs of the community.

</a>
</div>

</div>
</div>
</div>

我需要当用户点击上面的链接时，这个潜水会展开，当再次点击同一个链接时，它会再次折叠。我想使用 Angular.js 来实现。

【问题讨论】：

Expand and collapse with angular js的可能重复
再次尝试将此标记为可能的重复项，抄送@VicJordan。

标签： javascript angularjs

【解决方案1】：

您的代码有问题请从您的面板中删除折叠类，因为您的 div 总是因此而折叠。您可以在 javascript 中单击时编写一个函数，例如：

$scope.showTest = false;
$scope.showSubDiv = function (){
      $scope.showTest = !$scope.showTest;
 }

在你的 html 中：

<div id="inner1collapsea-5-1" class="panel-collapse" ng-show="showTest">

    <div class="panel-body padding0" style="border-top:none;">
        <div class="panel-group popup-accordian accordioninner 
 accordioninner-inner">
        <div class="panel panel-default" style="border:1px solid #66afe9;">
            <div class="panel-heading">
                <a class="panel-title sky-blue-light auditformpopup" 
role="button" ui-sref="subclause">
AAC1-A - The services being provided are clearly defined. The healthcare 
services being provided are clearly defined and are in consonance with the 
 needs 
of the community.

 </a>
            </div>

        </div>
    </div>
</div>

你忘了在这里最后添加一个div。

其次，您必须从锚标记中删除 href="#" 并仅为段落而不是按钮编写锚标记。

<a class="collapsed panel-title sky-blue-light" role="button" data-
toggle="collapse" aria-expanded="true" style="border-bottom:none;" ng-
click="showSubDiv();">
AAC1 - The organisation defines and displays the healthcare services that it 
can provide</a>

【讨论】：

【解决方案2】：

代码如下

<a ng-click="doSomething($event)">do something</a>


$scope.doSomething = function(ev) {
var element = ev.srcElement ? ev.srcElement : ev.target;
console.log(element, angular.element(element)) }

【讨论】：

【解决方案3】：

为了实现这一点，您必须创建一个自定义指令并引入某些特定的 css 更改。这是详细说明解决方案的link。

【讨论】：

【解决方案4】：

这是您正在尝试做的类似事情。希望对你有帮助。

(function(){
    angular
        .module('myApp',[])
        .controller('myCtrl', Controller);
    Controller.$inject = ['$rootScope', '$scope'];
    function Controller($rootScope, $scope){       
      
    }
})();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div 
     ng-app="myApp" 
     ng-controller="myCtrl">
  <div class="foreign-supplier-title clearfix" ng-click="showDetails = ! showDetails">
		<h4>
			<span class="foreign-supplier-arrow"><i ng-class="!showDetails?'fa fa-angle-right':'fa fa-angle-down'" aria-hidden="true"></i></span>
			<span class="foreign-supplier-text">Click here to see magic</h4>
	</div>
	<div ng-if="showDetails">
		<h2>Hello World</h2>	</div>
</div></body>
</html>

【讨论】：