Question

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

我的范围是一个三维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

Answer 1

如果我理解你，你会尝试创造动态差距（又名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

希望它会帮助你

Answer 2

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

AngularJS使用多维数组嵌套元素并通过单击显示它们

2 个答案: