使用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」或「貝拉」），並根據選擇具有「類型」陣列彈出第二個單選按鈕列表。有沒有辦法使這項工作，或我需要分裂的「名稱」 - 對象？

來源

2015-07-21 Alex

將是巨大的，如果你可以創建一個相同的小提琴。以便我們瞭解您期待的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>

來源

2015-07-21 07:20:16

他們都指的是相同的範圍，這是我的主要問題 - 兩個無線電列表需要擴大最高範圍。 – 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>

來源

2015-07-21 07:34:51 Himanshu

這看起來好像可以奏效 - 請問您可以創建一個plunkr或小提琴，以便我可以看到這在實際中會如何工作？謝謝！ – Alex

請看看下面的plnkr。我想這是你在找什麼：

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

我希望做的伎倆:)

來源

2015-07-21 07:54:16

良好的指導。我在最後的代碼中將它與答案一起使用。 – Alex

使用Angular重複嵌套對象

回答

相關問題