javascript - 使用 Angular 重复嵌套对象

Question

我查看了之前关于该主题的问题，但找不到类似这样的问题。

我的问题是，我想制作第二个 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"
            }
        ]
    }]

我的 AngularJS 代码目前看起来像这样:

  <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>

由于 $parent.selectedName.id 部分，我很确定这不起作用 - ng-repeat 已经创建了一个子作用域，所以这将是原始作用域的“孙子”，这意味着 $parent 是仅引用上面的脚本而不是其余代码。

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

编辑:我真正想做的是我希望能够选择一个单选按钮(在本例中为“Fido”或“Bella”)，并根据选择在第二个单选按钮列表。有没有办法使这项工作或我需要拆分“名称”对象？

Answer 1

您应该在 ng-repeat 之外显示 optional ，并将所选项目设置为其他范围值。请参阅此代码段。

注意:出于某种原因，单选按钮 ng-model 不能设置在范围变量上，但需要是对象的属性。不知道为什么。

angular
    .module('someApp', [])
    .controller('someController', function($scope){
  $scope.name = {
    selected: null
  };
  $scope.nameList = {
    Names: [{
     name: 'Foo',
     type: [
       { typeName: 'ready' },
       { typeName: 'steady' }
     ]
    },{
     name: 'Bar',
     type: [
       { typeName: 'start' },
       { typeName: 'stop' }
     ]
   }]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="someApp">
  <div ng-controller="someController">
    <div ng-repeat="item in nameList.Names">
      <label>
        <input type="radio" name="Name" ng-model="name.selected"
        ng-value="item" />{{item.name}}
      </label>
    </div>

    <label ng-repeat="type in name.selected.type">   
      <input
        type="radio" name="Type" ng-model="$parent.selectedType"
        ng-value="type"  />{{type.typeName}}
      </label>
  </div>
</div>