0

这是准确显示信息但视觉上没有正确定位的小提琴。

http://jsfiddle.net/LhRfq/

我的范围是一个三维 json 对象。

第一级数组项应该显示在一行中，并且效果很好..

选中顶部数组项时，第二层选定的子数组数据也显示在一行中。

使用相同的方法，我也完全能够显示第三层，但是我需要为第三层发生的是在所属数组项的正下方显示子项。

下面的代码接近我需要的，但我似乎无法隔离我只需要用于选定元素的子数组项..或更准确地说，只有选定的子数组显示多次而不是一次......

这是我当前的代码

<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”，在第二个数组中选中“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

我已经能够通过将 json 数组的第二维的 ng-repeat 嵌套到 json 数组的第一维的 ng-repeat 来解决这个问题。也可以通过将第三维嵌套到第二维。诀窍是在单独的元素中重复 ng-repeat 的声明。

于 2013-12-14T07:12:17.717 回答
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 回答