5

リストを表示するng-repeatがあり、クリックするとクリックしたアイテムdivsの追加divが表示されます。

これは機能しています

<div ng-repeat="item in items">

    <div ng-click="showfull = !showfull">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

私のアイテムは、アイテムのリストを含むjsonからロードされ、各アイテムには、このjsonでデフォルトの属性showfullが設定されています。falseこれは機能していますが、アイテムがクリックされたときにリスト内の他のすべてのアイテムを非表示にしたいと考えています。私はこのようなものを試しました:

これは機能していません

<div ng-repeat="item in items">

    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

そしてコントローラーに関数を追加しました：

$scope.expand = function(e) {
    e.showfull = !e.showfull;
    //TODO: put here a foreach logic to hide all other items
}

しかし、 foreach ロジックがなくても、これは機能しません。アイテムをクリックしても、追加の div は表示されません。2 つの質問があります。

  1. これはitem、関数で「コピーによって渡された」expandか、何らかのスコープ分離の問題が原因だと思いますが、その理由を詳しく説明してもらえますか? 解決した

  2. アイテムをクリックしてこのアイテムの追加コンテンツを表示するときに、他のアイテムのすべての追加 div を非表示にするにはどうすればよいですか? ディレクティブを実行する必要がありますか? 解決しない

ありがとう

4

3 に答える 3

4

あなたは正しい軌道に乗っていると思います。showfull項目にを設定してからng-showまたはng-ifを使用して非表示にするか、Gavin が述べたようにクラスを使用する必要があります。

アイテムを渡す場所で関数ng-clickを呼び出し、それを切り替えて、他のすべてを非表示に設定できます。expand

テンプレート：

<div ng-repeat="item in items>
    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="item.showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

コントローラ：

$scope.expand = function (item) {
    angular.forEach($scope.items, function (currentItem) {
        currentItem.showfull = currentItem === item && !currentItem.showfull;
    });
};
于 2014-10-16T16:00:33.037 に答える
2

expand メソッドはアイテムを変更しているため、 ng-show はアイテムを参照する必要があります。

<div ng-show="item.showfull">
    <p>{{item.info}}</p>
</div>

すべてのアイテムを非表示にするには、次のようにする必要があります

$scope.expand = function(item) {
   angular.forEach(items, function(i) {
       if (i === item) {
           i.showfull = !i.showfull;
       } else {
           i.showfull = false;
       }
    });
};
于 2014-10-16T15:54:12.050 に答える
0

表示したい 2 番目の div はアイテムを参照していませんか?

<div ng-repeat="item in items>

    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <!-- Added item to ng-show -->
    <div ng-show="item.showfull"> 
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>
于 2014-10-16T16:00:40.697 に答える