23

angular jsを使用して展開と折りたたみを行う方法を見つけようとしています。コントローラーでdomオブジェクトを操作せずにこれを行うエレガントな方法を見つけることができませんでした（これは角度のある方法ではありません）。現在、1つのレイヤーの展開と折りたたみを行うための良い方法があります。ただし、ネストを開始すると、物事が複雑になり、思いどおりに機能しません (複数の領域を展開して折りたたむ必要がない場合)。問題は、正しいコンテンツのみを展開/折りたたむために ng-click で一意の識別子を送信する方法がわからないことです。これらのアイテムは ng-repeat に含まれているため、送信されるパラメーターを必然的にカスタマイズできることに注意してください。

このjsfiddleを使用して、1つのレイヤーの展開と折りたたみを機能させることができました。ただし、これはトグルの方法であり、ユーザーが他のものを拡張しながら拡張したままにできるようにしたいと考えています。これを修正するために私がしたことは、配列を使用することでした。何かがクリックされるたびに、そのクリックされた項目のインデックスが配列に追加され、クラスが展開されます。ユーザーがもう一度クリックすると、インデックスが配列から削除され、領域が折りたたまれました。

私が見つけた別の方法は、ディレクティブを使用することです。しかし、ディレクティブがどのように機能するかについて頭を悩ませるための例を実際に見つけることができません。ディレクティブの作成に関しては、どのように開始すればよいかさえわかりません。

私の現在のセットアップは次のとおりです。

function Dexspander($scope) {
    $scope.ExpandArray = [];

    //Push or pop necessary elements for tracking
    $scope.DespopulatArray = function (identifier, element) {
    if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            $scope.ExpandArray.splice(_.indexOf($scope.ExpandArray, identifier + element), 1);
        } else {
            $scope.ExpandArray.push(identifier + element);
        }
    }

    //Change class of necessary elements
    $scope.Dexspand = function (identifier, element) {
        if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            return "expand";
        } else {
            return "collapse";
        }
    }
}

<div class="user-header" ng-repeat="user in users">
    <h1 ng-click="DespopulatArray('user', $index)">Expand</h1>
</div>
<div class="user-content" ng:class="Dexspand('user', $index)">
    <div class="content">
        <div class="user-information">
            <div class="info-header">
                <h1 ng-click="DespopulatArray('info', $index)>Some Information</h1>
            </div>
            <div class="info-contents" ng:class="Dexspand('info', $index)">
                stuff stuff stuff stuff...
            </div>
        </div>
    </div>
</div>

このセットアップの問題は、展開された div を親にする必要があり、それらの両方の下に展開するものがある場合、展開テキストをクリックすると、それらが一意ではないため、両方の領域で展開されることです。

4

6 に答える 6

27

これは、html で完全に解決できます。

<div>
  <input ng-model=collapse type=checkbox>Title
  <div ng-show=collapse>
     Only shown when checkbox is clicked
  </div>
</div>

これは、メンバーごとにローカルスコープを作成するため、ng-repeat でもうまく機能します。

<table>
  <tbody ng-repeat='m in members'>
    <tr>
       <td><input type=checkbox ng-model=collapse></td>
       <td>{{m.title}}</td>
    </tr>
    <tr ng-show=collapse>
      <td> </td>
      <td>{{ m.content }}</td>
    </tr>
  </tbody>
</table>

繰り返しには独自のスコープがありますが、最初はスーパー スコープの崩壊から値を継承することに注意してください。これにより、初期値を 1 か所で設定できますが、意外かもしれません。

もちろん、チェックボックスのスタイルを変更できます。http://jsfiddle.net/azD5m/5/を参照してください

更新されたフィドル: http://jsfiddle.net/azD5m/374/元のフィドルは</input>、タグを使用する代わりに、終了タグを使用して HTML テキスト ラベルを追加しました<label>。

于 2014-01-12T16:04:16.780 に答える
16

問題は、正しいコンテンツのみを展開/折りたたむために ng-click で一意の識別子を送信する方法がわからないことです。

$eventng-click (ng-dblclick および ng-mouse イベント) で渡すことができ、その後、イベントの原因となった要素を特定できます。

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

http://angular-ui.github.com/bootstrap/#/accordionも参照してください

于 2013-01-12T18:00:55.293 に答える
7

http://angular-ui.github.io/bootstrap/#/collapseを参照してください

function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = false;
}



<div ng-controller="CollapseDemoCtrl">
    <button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
    <hr>
    <div collapse="isCollapsed">
        <div class="well well-large">Some content</div> 
    </div>
</div>
于 2013-12-23T17:17:30.273 に答える
3

ng-show、ng-click、および ng-init を使用して、Angular を使用して単純な zippy/collapsable を作成しました。1 つのレベルに実装されていますが、複数のレベルに簡単に拡張できます。

ブール変数を ng-show に割り当て、ヘッダーのクリックで切り替えます。

ここでチェックしてください ここに画像の説明を入力

于 2013-11-07T08:49:06.377 に答える