AngularJS - 绑定单选按钮选择以在 ng-repeat 内建模

Question

我有一个数据模型 people，它采用以下形式：

personsInfo = {

              name: Adam
              dob: 31-FEB-1985
              docs: [  
              {
               docType: Drivers License,
               number: 121212,
               selected: false
               id: 1
              },
              { 
               selected: true,
               docType: None
              },
              { 
               docType: State ID,
               number: 132345,
               selected: false,
               id: 2
              }
             ]
            }

在我的标记中，我定义了以下内容以动态生成单选按钮。

<div ng-repeat="personDoc in personsInfo.docs">
  <input type="radio" name="personDocs" ng-model="personDoc.selected" value=""/>    

  {{personDoc.docType}} <span ng-hide="personDoc.docType === 'None'">Number: {{personDoc.number}}</span>
</div>

我希望能够检查在页面加载时选择为 true 的文档，然后根据用户选择的内容将所选标志保存在我的 peopleInfo 模型中。

我的目的是将personsInfo模型发送回另一个页面。

如果有人能指出我的工作小提琴，将不胜感激！

谢谢！

Answer 1

您几乎就错过了显示所选文档的绑定。我们将向范围添加一个对象来表示所选项目，然后将表单绑定到该模型。

JS

app.controller('...', function($scope) {
    $scope.personInfo = { ... };
    $scope.selectedDoc = {};

    $scope.$watch('personInfo',function() {
        $scope.selectedDoc = $scope.personInfo.docs[0];
    });
});

HTML

<div ng-repeat='doc in personInfo.docs'>
    <input type='radio' ng-model='selectedDoc' value='doc' /> {{doc.docType}}
</div>

<form>
    <input type='text' ng-model='selectedDoc.number' />
    ...
</form>