角度を使用したトグルまたはアコーディオン効果

Question

まずは角度のついていないので、以下のシナリオをどのように達成するかわかりません。

クリックすると、各行に関連するdivを表示/非表示できます。しかし、ツールチップが開いている（1行目が開いているとしましょう）と、別の行をクリックしています（3行目をクリックしています）、開いているツールチップ（1行目）が隠れていません。これで私を助けてください。以下は

これが私の目にぶつかった最初のものです

<div ng-repeat="breakdown in CallFullbreakdown" class="list-items-row"> 
    <div class="mob-number"><a data-ng-click="toggleDetails = !toggleDetails">{{breakdown.number}}</a></div> 
    <div class="call-date"><a data-ng-click="toggleDetails = !toggleDetails">{{breakdown.dateandtime}}</a></div> 
    <div class="call-cost text-align-right"><a data-ng-click="toggleDetails = !toggleDetails">£{{breakdown.cost}} <span class="chevron-style icon-up-chevron"></span></a></div> 
    <!-- Start Call Breakdown Tooltip --> 
    <div class="row position-relative call-breakdown" data-ng-show="toggleDetails"> 
     <span class="sprite arrow grey-arrow call-breakdown-arrow"></span> 
     <div class="mob-number"> 
      <span class="bolder">Call type</span> 
      <span>{{breakdown.callType}}</span> 
     </div> 
     <div class="call-date"> 
      <span class="bolder">Destination</span> 
      <span>{{breakdown.destination}}</span> 
     </div> 
     <div class="call-cost text-align-right"> 
      <span class="bolder">Duration</span> 
      <span>{{breakdown.duration}}</span> 
     </div> 
    </div> 
    <!-- End Call Breakdown Tooltip --> 
</div> 

Answer 1

、私のコードです：

data-ng-show="toggleDetails" data-ng-hide="!toggleDetails" 

NG-showが示すとhiddingの目的を提供しており、要素に割り当てられた変数のブール値に依存します。 同じ要素に両方を使用するのは単なる混乱です。

また、ng-show/hideを全面に広げました。コンテナレベルではできませんでしたか？

理想的には、jsfiddleに関する作業サンプルを提供し、そこから修正するのが理想的です。

Answer 2

すべてのtoggleDetails変数を切り替えるだけで、もう一方を開くときに1つを閉じることはできません。代わりに、あなたのコントローラに現在開かれているブレークダウンへの参照を作成してください。

次に、toggleDetailsは、ブレークダウンを引数としてトグルする関数を作成します。その機能は、現在どの内訳がist詳細を表示しているかを制御することができます。あなたのBreakdownControllerで

：

(...) 
var activeBreakdown; 
$scope.toggleDetails = function(breakdown) { 
    if (breakdown === activeBreakdown) { 
    // Breakdown is defined, so activeBreakdown must be as well 
    activeBreakdown.showDetails = !activeBreakdown.showDetails; 
    } else { 
    if (activeBreakdown) { 
     // Make sure the currently active breakdown is closed 
     activeBreakdown.showDetails = false; 
    } 
    // If a new breakdown is selected, it needs to be opened 
    breakdown.showDetails = true; 
    // And put on activeBreakdown so it can be closed on the next toggle 
    activeBreakdown = breakdown; 
    } 
}; 
(...) 

は、HTML：

<div ng-repeat="breakdown in callFullBreakdown" class="list-items-row"> 
    <!-- Breakdown row stuff here... --> 
    <!-- Start Call Breakdown Tooltip --> 
    <div class="row position-relative call-breakdown" style="background-color: #a0a0a0" ng-show="breakdown.showDetails"> 
    <!-- Details/tooltip here --> 
    </div> 
    <!-- End Call Breakdown Tooltip --> 
    <hr /> 
</div> 

NG-クリックで保存（したがってときにも潜在的なエラーの量を減らすために、また、このPlunk

を参照してください。何かを変更する）、行の部分（数値、日付、時間、コスト）を別の要素にラップし、そこにng-clickを置くことができるかどうかを確認してください。