使用 Angular 重复嵌套对象

Question

我查看了有关此主题的先前问题，但找不到任何类似的内容。

我的问题是我想制作第二个 HTML 单选按钮数组，这取决于首先选择了 which 单选按钮。假设对象数组是这样来找我的：

"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 之外显示可选选项，并将所选项目设置为其他范围值。看这个sn-p。

注意：由于某种原因，单选按钮 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>

Answer 2

请看下面的plnkr。我想这就是你要找的东西：

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

我希望这能解决问题:)

Answer 3

您可以使用ng-value 来满足您的需求：

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