Javascript 使用“角度”在嵌套对象上重复

我浏览了之前关于这个主题的问题，但没有找到任何类似的问题

我的问题是，我想让第二个HTML单选按钮数组取决于首先选择哪个单选按钮。假设我看到的对象数组是这样的：

"Names":[{ 
          "name": "Fido",
          "id": "1",
          "type": [
                {   
                "typeName": "Dog",
                "typeId": "1"
            },
            {
                "typeName": "Cat",
                "typeId": "2"
            },
            {
                "typeName": "Mouse",
                "typeId": "3"
            }
        ]
    },
    {
        "name": "Bella",
        "id": "2",
        "type": [
            {
                "typeName": "Cat",
                "typeId": "2"
            },
            {
                "typeName": "Mouse",
                "typeId": "3"
            }
        ]
    }]

  <label ng-repeat="item in nameList.Names">
            <input type="radio" name="Name" ng-model="$parent.selectedName"
            ng-value="item"> {{item.name}} </input>

         <label ng-repeat="item in nameList.Names[$parent.selectedName.id].type"> <input
            type="radio" name="Type" ng-model="$parent.selectedType"
            ng-value="type"> {{item.typeName}}</input>
         </label>
  </label>

我的AngularJS代码目前如下所示：

"Names":[{ 
          "name": "Fido",
          "id": "1",
          "type": [
                {   
                "typeName": "Dog",
                "typeId": "1"
            },
            {
                "typeName": "Cat",
                "typeId": "2"
            },
            {
                "typeName": "Mouse",
                "typeId": "3"
            }
        ]
    },
    {
        "name": "Bella",
        "id": "2",
        "type": [
            {
                "typeName": "Cat",
                "typeId": "2"
            },
            {
                "typeName": "Mouse",
                "typeId": "3"
            }
        ]
    }]

  <label ng-repeat="item in nameList.Names">
            <input type="radio" name="Name" ng-model="$parent.selectedName"
            ng-value="item"> {{item.name}} </input>

         <label ng-repeat="item in nameList.Names[$parent.selectedName.id].type"> <input
            type="radio" name="Type" ng-model="$parent.selectedType"
            ng-value="type"> {{item.typeName}}</input>
         </label>
  </label>

{{item.name}
{{item.typeName}

我很确定这不起作用，因为$parent.selectedName.id部分-ng repeat已经创建了一个子范围，因此这将是原始范围的“孙子”，这意味着$parent只是引用上面的脚本，而不是代码的其余部分

有没有办法解决这个问题，这样我就可以有一个列表，根据第一个选定的值更改选项

---

编辑：我实际上想做的是，我希望能够选择一个单选按钮（在本例中为“Fido”或“Bella”），并根据选择在第二个单选按钮列表中弹出“type”数组。有没有办法让这项工作，或者我需要拆分“名称”-对象

您应该显示ng repeat之外的可选选项，并将所选项目设置为其他一些范围值。请参阅此片段

注意：由于某些原因，不能在范围变量上设置单选按钮ng模型，但必须是对象的属性。不知道为什么

angular
.module（'someApp'，[]）
.controller（'someController'，函数（$scope）{
$scope.name={
所选：空
};
$scope.nameList={
姓名：[{
名称：“Foo”，
类型：[
{typeName:'ready'}，
{typeName:'稳定'}
]
},{
名称：'酒吧'，
类型：[
{typeName:'start'}，
{typeName:'停止'}
]
}]
};
});

{{item.name}
{{type.typeName}
您应该显示ng repeat之外的可选选项，并将所选项目设置为其他一些范围值。请参阅此片段

注意：由于某些原因，不能在范围变量上设置单选按钮ng模型，但必须是对象的属性。不知道为什么


angular
.module（'someApp'，[]）
.controller（'someController'，函数（$scope）{
$scope.name={
所选：空
};
$scope.nameList={
姓名：[{
名称：“Foo”，
类型：[
{typeName:'ready'}，
{typeName:'稳定'}
]
},{
名称：'酒吧'，
类型：[
{typeName:'start'}，
{typeName:'停止'}
]
}]
};
});

{{item.name}
{{type.typeName}
您可以使用
ng值来满足您的需求：

<div ng-repeat="name in names">
      <input type="radio" name="myRadio" ng-model = "selectedParent" ng-value="name.type">
          {{name.name}}
      </input>
</div>
   <div ng-repeat="selected in selectedParent">
        <input type="radio" name="childRadio" ng-model="selectedId" ng-value="selected.typeId" >{{selected.typeName}}</input>
    </div>    


{{name.name}
{{selected.typeName}
您可以使用
ng值来满足您的需求：

<div ng-repeat="name in names">
      <input type="radio" name="myRadio" ng-model = "selectedParent" ng-value="name.type">
          {{name.name}}
      </input>
</div>
   <div ng-repeat="selected in selectedParent">
        <input type="radio" name="childRadio" ng-model="selectedId" ng-value="selected.typeId" >{{selected.typeName}}</input>
    </div>    


{{name.name}
{{selected.typeName}
请查看以下plnkr。我想这就是你想要的：

` `http://plnkr.co/edit/RQQi5Fo9FzM409qKHwjG?p=preview

我希望这能奏效：）
请看下面的plnkr。我想这就是你想要的：

` `http://plnkr.co/edit/RQQi5Fo9FzM409qKHwjG?p=preview

我希望这能起到作用：）
如果你能为它制作一把小提琴，那就太好了。因此，我们了解了您所期望的HTML:）-我真的不知道代码应该是什么样子，所以不能做更多的事情。我希望在我选择前两个单选按钮中的一个后，第二个单选按钮就变得可见，第二个单选按钮应该以内部“type”数组中的元素命名。我想这就是你想要的答案：）如果你能为同样的东西做一把小提琴，那就太好了。因此，我们了解了您所期望的HTML:）-我真的不知道代码应该是什么样子，所以不能做更多的事情。我希望在我选择前两个单选按钮中的一个后，第二个单选按钮就变得可见，第二个单选按钮应该以内部“type”数组中的元素命名。我想这就是你想要的答案：）它们都指向同一个范围，这是我的主要问题-两个无线电列表都需要扩大最高范围。@Alex我明白了，我已经创建了一个小提琴，它具有你想要的功能。这看起来很对-让我在实际代码上试用，看看它是否有效！谢谢您是否知道如何将$parent.selectedName和$parent.selectedType绑定到您的代码@Justus？我正在处理一小段代码，不使用它们会破坏代码的其余部分。@Alex没有上下文很难说。但是，例如，在选择时，可以使用选定的值更新原始数组。也许一个$watch或ng click函数就可以做到这一点。它们都指向相同的作用域，这是我的主要问题-两个无线电列表都需要扩大最高的作用域。@Alex我明白了，我已经创建了一个具有你想要的功能的提琴，我想。这看起来不错-让我在实际代码中试试，看看它是否有效！谢谢您是否知道如何将$parent.selectedName和$parent.selectedType绑定到您的代码@Justus？我正在处理一小段代码，不使用它们会破坏代码的其余部分。@Alex没有上下文很难说。但是，例如，在选择时，可以使用选定的值更新原始数组。也许$watch或ng click函数可以实现这个功能。看起来它可以工作-你能创建一个plunkr或fiddle吗？这样我就可以看到它在实践中是如何工作的了？谢谢这看起来是可行的-你能不能创建一个弹弓或小提琴，这样我就可以看到它在实践中是如何工作的？谢谢很好的指导。在最后的代码中，我将其与答案一起使用