使用Angular重复嵌套对象

问题描述：

我翻看了关于此主题的前几个问题，但找不到像这样的任何内容。使用Angular重复嵌套对象

我的问题是，我想要制作第二个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 part - ng-repeat已经创建了一个子范围，所以这将是原始范围的“孙”，这意味着$ parent只是指上述脚本而不是代码的其余部分。

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

编辑：我其实想要做的是，我希望能够选择一个单选按钮（在这种情况下“Fido”或“贝拉”），并根据选择具有“类型”阵列弹出第二个单选按钮列表。有没有办法使这项工作，或我需要分裂的“名称” - 对象？

将是巨大的，如果你可以创建一个相同的小提琴。以便我们了解您期待的HTML :) –

http://jsfiddle.net/Lf9dpd3k/ - 因为我真的不知道代码应该是什么样子，所以无法做更多的事情。我希望第二个单选按钮变得可见，只要我选择前两个单选按钮中的一个，第二个单选按钮应该以内部“类型”数组中的元素命名。 – Alex

看看答案。我想这是你正在寻找的答案:) –

答

您应该在ng-repeat之外显示可选的选项，并将选定的项目设置为其他范围值。看到这个片段。

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

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>

他们都指的是相同的范围，这是我的主要问题 - 两个无线电列表需要扩大最高范围。 – Alex

@Alex我看到了，我创建了一个小配件，它具有您想要的功能，我认为。 –

这看起来是正确的 - 让我试试它的实际代码，我会看看它是否工作！谢谢！ – Alex

答

可以使用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>

这看起来好像可以奏效 - 请问您可以创建一个plunkr或小提琴，以便我可以看到这在实际中会如何工作？谢谢！ – Alex

答

请看看下面的plnkr。我想这是你在找什么：

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

我希望做的伎俩:)

良好的指导。我在最后的代码中将它与答案一起使用。 – Alex

使用Angular重复嵌套对象

相关推荐