Angular.jsを使用してdivを展開および折りたたむ方法

div要素を展開し、リンクをクリックしてAngular.jsを使用して折りたたむ必要があります。私は以下のコードを説明しています。Angular.jsを使用してdivを展開および折りたたむ方法

<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を使って作りたい。

出典

2017-10-25 satya

[展開角度JSと崩壊（https://stackoverflow.com/questions/12603425/expand-and-collapse-with-angular-js）の可能性の重複 – VicJordan

コードに問題があります。この理由から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>

をあなたはここで終わりに1つのdiv要素を追加するのを忘れ。

第2に、アンカータグから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>

出典

2017-10-25 06:48:21 vertika

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

出典

2017-10-25 06:28:51

次のコードためにカスタムディレクティブを作成して、特定の特定のCSSの変更をinroduceする必要がありますこれを達成。解決策を具体化するのはlinkです。

出典

2017-10-25 06:47:34 Mudassar

これは、同じことをしようとしています。それがあなたを助けることを願っています。

(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"> 
 
\t \t <h4> 
 
\t \t \t <span class="foreign-supplier-arrow"><i ng-class="!showDetails?'fa fa-angle-right':'fa fa-angle-down'" aria-hidden="true"></i></span> 
 
\t \t \t <span class="foreign-supplier-text">Click here to see magic</h4> 
 
\t </div> 
 
\t <div ng-if="showDetails"> 
 
\t \t <h2>Hello World</h2> \t </div> 
 
</div></body> 
 
</html>

出典

2017-10-25 06:59:46

Angular.jsを使用してdivを展開および折りたたむ方法

答えて

関連する問題