使用ng-model與嵌套ng-repeat內的單選按鈕不起作用

Question

嘿我正在嘗試在ng-repeat中顯示單選按鈕列表，它似乎沒有考慮我在輸入上綁定到ng-model的字段的初始值。

當我給ng-repeat一個簡單的數組時，按鈕會正確顯示初始值。 但是如果嵌套的ng-repeat進入圖片，則只有每個列表的最后一項用值初始化

這是我的筆：

https://codepen.io/alokraop/pen/JXLZBp

我不知道我哪里出錯了。 我確保單選按鈕的name屬性對每個組都是唯一的。

感謝幫助。

Answer 1

這里的問題是您不能將Angular值插入到attr name 。 如果我們從HTML中刪除名稱attr，我們會得到預期的結果。 見下文。

<div ng-app="sample">
  <div ng-controller="sampleController as sample">
    Single ng-repeat:
    <div ng-repeat="queue in sample.queues">{{queue.name}} status:
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="hooked" /> hooked
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="unhooked" /> unhooked
      <input type="radio" name="queue-{{$index}}"  ng-model="queue.condition" value="partial" /> partial
    </div>
    <br />
    Nested ng-repeat:
    <div ng-repeat="qm in sample.qms">
      {{qm.name}} queues:
      <div ng-repeat="queue in qm.queues">{{queue.name}} status:
        <input type="radio" ng-model="queue.condition" value="hooked" /> hooked
        <input type="radio" ng-model="queue.condition" value="unhooked" /> unhooked
        <input type="radio" ng-model="queue.condition" value="partial" /> partial
      </div>
    </div>
  </div>

</div>

如果我們想要動態包含名稱，請查看Angular名稱指令，例如： Angularjs中的動態表單名稱屬性<input type =“text”name =“{{variable-name}}”/>