这是问题所在,
我实际上必须管理可以包含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
.这个数据可能很大,在这个例子中它很小,但是这可以是一个很长的对象列表,可以包含在另一个对象中.
希望这个例子可以让我的问题更清楚.
谢谢阅读