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已经创建了一个子范围，因此这将是＆＃34;孙子＆＃34;原始范围，这意味着$ parent只是引用上面的脚本，而不是代码的其余部分。

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

编辑：我真正想做的是我希望能够选择一个单选按钮（在这种情况下＆＃34; Fido＆＃34;或＆＃34; Bella＆＃34;）并且根据选择而定两种数组＆＃34; type＆＃34;弹出第二个单选按钮列表。有没有办法让这项工作或我需要拆分＆＃34; Names＆＃34; -object？

Answer 1

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

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

www.example.com/#/mysite

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' }
     ]
   }]
    };
  });

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>

使用Angular重复嵌套对象

3 个答案: