Pertanyaan UI Angularjs runtuh dalam ngRepeat


Saya mencoba untuk menanamkan beberapa panel yang bisa dilipat dalam ngRepeat. Ini yang saya miliki:

<div class="panel panel-default" ng-repeat="element in elements">
 <div class="panel-heading">
  {{element.name}}
  <button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button>
 </div>
 <div class="panel-body" collapse="element.isCollapsed">
  Content
 </div>
</div>

Sekarang, ketika saya mengklik tombol, keruntuhan tidak berfungsi. Dari dokumentasi saya mengerti bahwa repeater menciptakan ruang untuk setiap element. Dan atributnya collapse dari panel-body harus mendapatkan ruang lingkup yang sama, bukan? Sepertinya itu scope.$watch dalam collapse direktif tidak berfungsi sebagaimana mestinya. Atau mungkin saya melakukan kesalahan?

Terima kasih


4
2018-02-18 10:46


asal


Jawaban:


Silakan periksa biola yang diperbarui: http://jsfiddle.net/nZ9Nx/9/

Saya telah membuat aplikasi dan menginjeksi ui-bootstrap di dalamnya untuk membuat keruntuhan berfungsi.

angular.module('test', ['ui.bootstrap']);

5
2018-02-18 12:35



Masalahnya adalah

<div class="panel-heading" toggle target="collapseOne">

Ini hardcoded dalam contoh. Ubah dengan...

<div class="panel-heading" toggle target="collapse{{ $index + 1 }}">

Perbarui juga tag ini

<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">

Berikut ini contoh lengkapnya

<div ng-repeat="item in awesomeThings">
    <div class="panel panel-default">
        <div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
            <h4 class="panel-title">
                {{ item }}
            </h4>
        </div>
        <div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
            <div class="panel-body">
                <!-- ... -->
            </div>
        </div>
    </div>
</div>

3
2017-09-02 16:28