Question

我需要在点击链接时展开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。

Answer 1

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

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

Answer 2

this one is related to your question i think

下面的代码

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

Answer 3

为了实现这一目标，您必须创建一个自定义指令并产生某些某些css更改。以下是详细说明解决方案的link。

Answer 4

这是你想要做的类似的事情。希望它会对你有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: