javascript - 带有 AngularJS 的某种俄罗斯娃娃容器的动态编辑表单

Question

问题来了，

我实际上必须管理可以包含在 db 中定义的其他对象的对象。
例如，我有 5 种盒子。一个红框，一个绿框，一个蓝框，一个黄框，一个黑框。

每个盒子可以包含一个盒子，也可以包含一个盒子，依此类推。

我收到的是这种对象:

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

所以这个例子是:一个黑色的盒子，里面有一个红色的盒子，里面有一个空的绿色盒子。 (黑色 -> 红色 -> 绿色 -> 空)

有条件:

黑框只能包含蓝色、绿色和红色，

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

黄色框不能包含任何内容，

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

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

<select name="LEVEL_1">
        <option value="0">NONE</option>
        <option selected value="1">black</option>
        <option value="8">red</option>
        <option value="15">green</option>
        <option value="3">blue</option>
        <option value="10">yellow</option>
    </select>
<br/>
    <select name="LEVEL_2">
        <option value="0">NONE</option>
        <option selected value="8">red</option>
        <option value="15">green</option>
        <option value="3">blue</option>
    </select>
<br/>
    <select name="LEVEL_3">
        <option value="0">NONE</option>
        <option selected value="15">green</option>
        <option value="10">yellow</option>
    </select>
<br/>
    <select name="LEVEL_4">
        <option selected value="0">NONE</option>
        <option value="15">green</option>
        <option value="8">red</option>
        <option value="3">blue</option>
        <option value="10">yellow</option>
        <option value="1">black</option>
    </select>

这必须通过 AngularJS 来实现。

整个示例都出现在一张 table 上，因此这些框以这种方式显示为一张 table :

<table>
  <thead style="font-weight:bold;">
    <tr style="background-color:lightblue;">
      <td>Id</td>
      <td>Type</td>
      <td>Contains (sum)</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-click="setCurrentBox();" style="background-color:lightgreen;">
      <td>1</td>
      <td>black</td>
      <td>2 boxes</td>
    </tr>
  </tbody>
</table>

注意 ng-click部分。 setCurrentBox()函数在 Controller 中定义，它设置为 $scope.currentBox ，从“ BoxService”接收的盒子对象。

点击行会调用 BoxService ，检索所选框的 json 对象(完全!将包含的框放入其中，如线程顶部所写)，并将其分配给 $scope.currentBox多变的。

更改框选择值应该“清空”下一个可能的选择(将“无”设置为选中并将可能的选择添加为选项)，如果有子框，则只需删除它们(在我的示例中将黑色选择更改为红色黑色->red->green->empty 将给出 red->empty (无 -selected- 和绿色和黄色选项)。

就我而言，我只能直接访问 $scope.currentBox . “ currentBox”包含的框是属性。所以，不知何故，我认为我应该做一些 if object.box!=null然后阅读框...但是我对此有点迷茫...

好吧，我不知道我的问题定义是否足够清楚，这是一个简短的 fiddle ，应该在这种“俄罗斯娃娃”问题中“显示我想要到达的地方”......

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!): 
    <!--This select contains all possible choices since it is the very first choice possible, no dependency-->
        <select name="box0">
            <option value="">NO CHOICE</option>
            <option selected value="1">black</option>
            <option value="8">red</option>
            <option value="15">green</option>
            <option value="3">blue</option>
            <option value="10">yellow</option>
        </select>
    <br/>Box 1 (contained in box 0 box property) : 
    <!--This select contains only boxes choices that a black box can get (since it depends of box 0 value)-->
        <select name="box1">
            <option value="">NO CHOICE</option>
            <option selected value="8">red</option>
            <option value="15">green</option>
            <option value="3">blue</option>
        </select>        
    <br/>Box 2 (contained in box 1 box property) : 
    <!--This select contains only boxes choices that a red box can get (since it depends of box 1 value)-->
        <select name="box2">
            <option value="">NO CHOICE</option>
            <option selected value="15">green</option>
            <option value="10">yellow</option>
        </select>        
    <br/>Box 3 (contained in box 2 box property) : 
    <!--This select contains only boxes choices that a green box can get (since it depends of box 2 value)-->
        <select name="box3">
            <option value="">NO CHOICE</option>
            <option value="1">black</option>
            <option value="8">red</option>
            <option selected value="15">green</option>
            <option value="3">blue</option>
            <option value="10">yellow</option>
        </select>        
    <br/>Box 4 (contained in box 3 box property) : 
    <!--This select contains only boxes choices that a green box can get (since it depends of box 3 value)-->
        <select name="box4">
            <option value="">NO CHOICE</option>
            <option value="1">black</option>
            <option value="8">red</option>
            <option selected value="15">green</option>
            <option value="3">blue</option>
            <option value="10">yellow</option>
        </select>        
    <br/>Box 5 (empty box ready to be filled in box 4 property) : 
    <!--This select contains only boxes choices that a green box can get (since it depends of box 4 value)-->
    <!--This select has default selected value set as null since box4 box property is not set (box 4 box property is not a box, box 4 contains nothing)-->
        <select name="box5">
            <option value="" selected>NO CHOICE</option>
            <option value="1">black</option>
            <option value="8">red</option>
            <option value="15">green</option>
            <option value="3">blue</option>
            <option value="10">yellow</option>
        </select>        

具体示例:用户操作 1:

如果用户将框 2 设置为 NO CHOICE 或 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!): 
    <!--This select contains all possible choices since it is the very first choice possible, no dependency-->
        <select name="box0">
            <option value="">NO CHOICE</option>
            <option selected value="1">black</option>
            <option value="8">red</option>
            <option value="15">green</option>
            <option value="3">blue</option>
            <option value="10">yellow</option>
        </select>
    <br/>Box 1 (contained in box 0 box property) : 
    <!--This select contains only boxes choices that a black box can get (since it depends of box 0 value)-->
        <select name="box1">
            <option value="">NO CHOICE</option>
            <option selected value="8">red</option>
            <option value="15">green</option>
            <option value="3">blue</option>
        </select>        
    <br/>Box 2 (contained in box 1 box property) : 
    <!--This select contains only boxes choices that a red box can get (since it depends of box 1 value)-->
        <select name="box2">
            <option selected value="">NO CHOICE</option>
            <option value="15">green</option>
            <option value="10">yellow</option>
        </select>        

具体示例:用户操作 1:

如果用户将框 1 设置为蓝色 ，那么当前的盒子对象应该是这样的:

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

HTML 部分应该变成这样:

Box 0 (all box colors choices available here!): 
    <!--This select contains all possible choices since it is the very first choice possible, no dependency-->
        <select name="box0">
            <option value="">NO CHOICE</option>
            <option selected value="1">black</option>
            <option value="8">red</option>
            <option value="15">green</option>
            <option value="3">blue</option>
            <option value="10">yellow</option>
        </select>
    <br/>Box 1 (contained in box 0 box property) : 
    <!--This select contains only boxes choices that a black box can get (since it depends of box 0 value)-->
        <select name="box1">
            <option value="">NO CHOICE</option>
            <option value="8">red</option>
            <option value="15">green</option>
            <option selected value="3">blue</option>
        </select>        
    <br/>Box 2 (contained in box 1 box property) : 
    <!--This select contains only boxes choices that a blue box can get (since it depends of box 1 value)-->
        <select name="box2">
            <option selected value="">NO CHOICE</option>
            <option value="15">green</option>
            <option value="8">red</option>
            <option value="3">blue</option>
            <option value="10">yellow</option>
            <option value="1">black</option>
        </select>        

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

希望这个例子能让我的问题更清楚。

谢谢阅读

Answer 1

试试这个例子:
http://jsfiddle.net/kevalbhatt18/0js7q638/1/

Using checkInnerObject function it will return count of 'box' see in example

function checkInnerObject(obj) {
    var i = 0;
    var arg = Array.prototype.slice.call(arguments, 1);
    start: while (obj) {
        if (obj.hasOwnProperty(arg)) {
            obj = obj[arg];
            i = i + 1;
            continue start;
        }
     }
        return i - 1;
}

checkInnerObject(OBJECT,'key you want to find');

更新:

示例: http://jsfiddle.net/kevalbhatt18/0js7q638/5/