0

これは、情報を正確に表示するフィドルですが、視覚的に正しく配置されていません。

http://jsfiddle.net/LhRfq/

私のスコープは、3 次元の json オブジェクトです。

第 1 レベルの配列項目は 1 行で表示されるはずであり、問​​題なく動作します。

最上位配列項目にチェックを入れると、選択したサブ配列データの2層目も一列に表示されます。

同じアプローチを使用して、3 番目のレイヤーも完全に表示できますが、3 番目のレイヤーで行う必要があるのは、所属する配列アイテムのすぐ下にサブアイテムを表示することです..

以下のコードは私が必要とするものに近いですが、選択した要素にのみ必要なサブ配列項目を分離できないようです..またはより正確には、選択したサブ配列のみが1回ではなく複数回表示されます...

これは私の現在のコードです

<div ng-repeat="publication in publicationData">
    <ul>
        <li>
            <input type="checkbox" name="pubCat" ng-model="publication.selected">
            {{publication.pubName}}
        </li>
    </ul>
</div>

<br/><br/>


<div ng-repeat="publication in publicationData | filter:{selected:true}" >
    <div>
        <ul id="publists">
            <li ng-repeat="category in publication.pubCat">
                <input type="checkbox" name="pubCat" ng-model="category.selected">{{category.pubCatName}}



                <!-- THIS CODE DISPLAYS THE SAME ARRAY MULTIPLE TIMES -->

                <div ng-repeat="publication in publicationData">
                <div ng-repeat="category in publication.pubCat | filter:{selected:true}">

                <div>
                    <ul>
                        <li ng-repeat="subcategory in category.pubSubCat">
                            <input type="checkbox" name="pubSubCat">{{subcategory.pubSubCatName}}
                        </li>
                    </ul>

                </div>
                </div>  
                </div>

                <!-- ABOVE CODE DISPLAYS THE SAME ARRAY MULTIPLE TIMES -->



            </li>
        </ul>   
    </div>
</div>

なぜこれが起こっているのかは理解していますが、私が見なければならないことをどのように達成できるかを理解することはできません.

このようなものを達成するためのアプローチとして何をアドバイスしますか...最初の配列で「オプション1」がチェックされ、2番目の配列で「SubOpt 1 B」がチェックされている場合

|_| Option 1          |_| Option 2          |_| Option 3

|_| SubOpt 1 A        |_| SubOpt 1 B        |_| SubOpt 1 C

                    |_| SubSubOptB 1    
                    |_| SubSubOptB 2     
                    |_| SubSubOptB 3    
                    |_| SubSubOptB 4
4

2 に答える 2

0

私があなたを正しく理解していれば、あなたは動的なギャップ（別名margin-left）を作成しようとします。

ng-styleスタイルを動的に変更する機能を使用することで、それを実現できます。

<div ng-repeat="publication in publicationData" ng-style="myStyle($index)">

そしてコントローラーで：

 $scope.myStyle = function(index) {
        return {
            "margin-left": (93 * index) + "px" // example only
        }
    };

これは方向性、

デモFiddle

それがあなたを助けることを願っています

于 2013-11-12T23:04:10.547 に答える