AngularJS-将单选按钮选择绑定到模型内部ng重复

AngularJS - Binding radio button selection to model inside ng-repeat

本文关键字：模型 内部 ng 重复 绑定 单选按钮 选择 AngularJS-      更新时间：2023-09-26

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

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的文档，然后根据用户的选择将所选标志保存在我的personsInfo模型中。

我在这里的意图是将personsInfo模型发送回另一个页面。

如果有人能给我指一把正在工作的小提琴，我将不胜感激！

谢谢！

您几乎已经错过了显示所选文档的绑定。我们将在作用域中添加一个对象来表示所选项目，然后将表单绑定到该模型。

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>
相关文章：