当前位置:  开发笔记 > 编程语言 > 正文

使用AngularJS的某种俄罗斯玩偶容器的动态编辑表单

如何解决《使用AngularJS的某种俄罗斯玩偶容器的动态编辑表单》经验,为你挑选了0个好方法。

这是问题所在,

我实际上必须管理可以包含db中定义的其他对象的对象.所以,例如,我有5种盒子.一个红色的盒子,一个绿色的盒子,一个蓝色的盒子,一个黄色的盒子和一个黑盒子.

每个框可以包含一个框,也可以包含一个框,依此类推.

我收到的是这种对象:

{
    "id":1,
    "type":"black",
    "box":
    {
        "id":8,
        "type":"red",
        "box":
        {
            "id":15,
            "type":"green",
            "box":null
        }
    }
}

所以这个例子是:一个黑盒子,包含一个红色的盒子,里面有一个空的绿色盒子.(黑色 - >红色 - >绿色 - >空)

有条件:

黑匣子只能包含蓝色,绿色和红色,

红色框只能包含绿色和黄色,

黄色的盒子什么都没有,

其他框(绿色和蓝色)可以包含任何内容

我需要做的是某种"盒子集编辑器",我收到一个盒子对象,这是一个复杂与否(意味着它只能有一个盒子级别,或几个).我必须在选择框的列表中表示它,因此,对于我写的示例,它将显示:





这必须通过AngularJS实现.

整个示例来自一个表,因此这些框以这种方式显示为表:

Id Type Contains (sum)
1 black 2 boxes

请注意该ng-click部分.该setCurrentBox()函数在控制器中定义,并设置$scope.currentBox从" BoxService" 接收的框对象.

单击该行将调用BoxService,检索所选框的json对象(完全!包含在其中的框,如在线程顶部所写),并将其分配给$scope.currentBox变量.

更改框选择值应"清空"下一个可能的选择(将"无"设置为选中并添加可能的选项作为选项),如果有子框,则只需擦除它们(在我的示例中将黑色选项更改为红色 - > red-> green-> empty会给red-> empty(None-selected-以及绿色和黄色选项).

就我而言,我只能直接访问$scope.currentBox.而" currentBox"包含的框是属性.所以,不知何故,我认为我应该做一些if object.box!=null当时的阅读框...但我有点迷失它...

好吧,我不知道我的问题定义是否足够清楚,这是一个短小提琴,应该"显示我想要得到的地方"这种"俄罗斯娃娃"问题......

http://jsfiddle.net/z267dquk/2/

更新1:http://jsfiddle.net/0js7q638/

感谢阅读/帮助



更新2:以下是我的问题的一个例子/我想做什么/我想念的内容似乎并不清楚.

具体示例 - 开始情况:

盒子对象:

Box 0 (black one)
contains Box 1 (red one)
contains Box 2 (green one)
contains Box 3 (green one)
contains Box 4 (green one) 
contains nothing (yet)

当用户在表中选择框0时,他获得了这个对象:

{
"id":"1",
"type":"black",
"box":{
    "id":"8",
    "type":"red",
    "box":{
        "id":"15",
        "type":"green",
        "box":{
            "id":"15",
            "type":"green",
            "box":{
                "id":"15",
                "type":"green",
                "box":null
            }
        }
    }
}
}

必须将此对象显示到可编辑的选择框中,如下所示:

Box 0 (all box colors choices available here!): 
    
        
    
Box 1 (contained in box 0 box property) :
Box 2 (contained in box 1 box property) :
Box 3 (contained in box 2 box property) :
Box 4 (contained in box 3 box property) :
Box 5 (empty box ready to be filled in box 4 property) :

具体示例:用户操作1:

如果用户将框2设置为NO CHOICE OR YELLOW(因为黄色框不能包含任何框),则当前框对象应如下所示:

{
    "id":"1",
    "type":"black",
    "box":{
        "id":"8",
        "type":"red",
        "box":{
            "id":"15",
            "type":"green",
            "box":null
        }
    }
}

HTML部分应该像这样:

Box 0 (all box colors choices available here!): 
    
        
    
Box 1 (contained in box 0 box property) :
Box 2 (contained in box 1 box property) :

具体示例:用户操作1:

如果用户将框1设置为BLUE,则当前框对象应如下所示:

{
    "id":"1",
    "type":"black",
    "box":{
        "id":"3",
        "type":"blue",
        "box":null
    }
}

HTML部分应该像这样:

Box 0 (all box colors choices available here!): 
    
        
    
Box 1 (contained in box 0 box property) :
Box 2 (contained in box 1 box property) :

请注意,我可以获得一个盒子的可能选择,或者来自的任何盒子的所有可能选择BoxService.这是来自BoxService.这个数据可能很大,在这个例子中它很小,但是这可以是一个很长的对象列表,可以包含在另一个对象中.

希望这个例子可以让我的问题更清楚.

谢谢阅读

推荐阅读
可爱的天使keven_464
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有