2

項目の ng-repeat リストで ui-bootstrap の折りたたみを使用しようとしています。モジュールに ui.bootstrap を追加し、次の html を作成しました。

<div class="title">Things <a class="collapse" ng-click="isThingsCollapsed = !isThingsCollapsed">+</a></div>
<div collapse="isThingsCollapsed">
    <div  ng-repeat="thing in things">{{thing.displayName}}</div>
</div>

リンクをクリックしても、すべてが機能するように見えます。

 <div collapse="isThingsCollapsed" style="height: 81px;">

に：

<div collapse="isThingsCollapsed" style="height: 0px;">

しかし、実際に崩壊するものは何も見られません。すべてが画面上にあった場所にとどまります。何か案は？

4

1 に答える 1

4

私は先週同じ問題を抱えていました。最新のスクリプトが必要です。これらを含めます (まだ行っていない場合):

http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js

http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js

また忘れがちなのは、パラメーターとして ui.bootstrap が必要なことです...

var myApp = angular.module('myApp', ['ui.bootstrap']);

私が作成したisThingsCollapsed jsfiddleをチェックしてください...

編集

私の答えは ng-repeat の崩壊にも答えていないというコメントを受け取ったので、問題に対する私の見解といくつかの例を示します。

  • 答え（上記の「編集」）は、質問で提供されたコードに問題がないことについてでした。['ui.bootstrap']私は同じ問題を抱えていたので、コードは正しいが崩壊を示していなかったので、上記のようにモジュールにパラメーターとして含めるのを忘れていたことに最終的に気づきました。

異なる ng-repeat 崩壊の例:

  1. isThingsCollapsed jsfiddleは、コンテンツとして 2 つの div を持つ div を折りたたみます。そのうちの 1 つは ng-repeat を使用し、もう 1 つの div は同じ JSON の手動出力を使用します。

  2. Toggle Chart / Table (外部 JSAPI の動作)は、ng-repeat テーブルを含む div で折りたたまれています。

  3. 私自身の答えとjsFiddleを含むマルチレベルテーブル（クリックすると別のテーブル内）複数のng-repeatテーブル DOM wを埋めていません。LVL2は、ネストされた 2 つの ng-repeat テーブルに関する問題を示しているため、collapse を使用せずに ng-switch を使用します。これにより、行レベルで展開/折りたたみの「感覚」が得られます。

これで解決することを願っています。

于 2013-07-22T14:18:17.270 に答える