web-dev-qa-db-ja.com

angular jsで展開および折りたたみます

私はangular jsを使用して展開と折りたたみを行う方法を見つけようとしています。コントローラーのdomオブジェクトを操作せずにこれを行うエレガントな方法を見つけることができませんでしたangular way）ではありません。現在、1つのレイヤーを展開したり折りたたんだりするための素敵な方法があります。ただし、ネストを開始すると、事態は複雑になり、うまく機能しません問題があるのは、NGをクリックして一意の識別子を送信し、正しいコンテンツのみを展開/折りたたみする方法がわからないことです。アイテムは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を親にする必要があり、それらの両方に展開するものがある場合、展開テキストをクリックすると、両方が一意ではないため両方の領域で展開されることです。

javascriptexpandcollapseangularjs
22
yaegerbomb

問題は、ng-クリックで一意の識別子を送信して正しいコンテンツのみを展開/折りたたむ方法を知らないことによって生じます。

$eventをng-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 も参照してください

16
Mark Rajcok

これは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>タグを閉じるために使用された元のフィドル<label>タグを使用する代わりにHTMLテキストラベルを追加します。

27
Peter Kriens

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>
7
Crystal Gardner

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

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

確認してください こちら enter image description here

3
Allzhere

ここではAngular JSでのng-repeatを使用した簡単で簡単な解決策が役立ちます。

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {

  $scope.arr= [
    {name:"Head1",desc:"Head1Desc"},
    {name:"Head2",desc:"Head2Desc"},
    {name:"Head3",desc:"Head3Desc"},
    {name:"Head4",desc:"Head4Desc"}
    ];
    
    $scope.collapseIt = function(id){
      $scope.collapseId = ($scope.collapseId==id)?-1:id;
    }
});
/* Put your css in here */
li {
  list-style:none;
  padding:5px;
  color:red;
}
div{
  padding:10px;
  background:#ddd;
}
<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Simple Collapse</title>
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
  <li ng-repeat='ret in arr track by $index'>
    <div ng-click="collapseIt($index)">{{ret.name}}</div>
    <div ng-if="collapseId==$index">
      {{ret.desc}}
    </div>
  </li>
</ul>
</body>
</html>

これは要件を満たす必要があります。これが作業コードです。

Plunkrリンク http://plnkr.co/edit/n5DZxluYHi8FI3OmzFq2?p=preview

Github： https://github.com/deepakkoirala/SimpleAngularCollapse

2
ideeps