Question

您好我尝试使用单选按钮创建动态表单，在我的结果中我无法正确形成

我的代码是

<tr ng-repeat="i in [1,2,3] track by $index">
  <td><input type="text" class="form-control"></td>
  <td>
    <label>
        <input ng-model="$parent.reservation.gender" type="radio"
               name="gender.$index"
               value="male" checked>
        Male
    </label>

    <label>
        <input ng-model="$parent.reservation.gender" type="radio"
               name="gender.$index"
               value="female" checked>
        Female
    </label>
  </td>
  <td><input type="text" class="form-control"></td>
</tr>

我的方案我必须选择每一行的性别，但我无法设置参数才能正确运行

screenshot of my work

Plunkr link

Answer 1

不要使用checked。您应该使用值初始化模型，然后检查它：

<tr ng-repeat="i in [1,2,3] track by $index" ng-init="$parent.reservation.gender='female'">

我还打赌你的意思是name="gender.{{$index}}"而不是name="gender.$index"

http://plnkr.co/edit/X8YXa5n5gLkjXOTTB7RL?p=preview

Answer 2

从你的描述中并没有完全清楚“正确运行”是什么意思，所以我会猜测一下。

您希望reservation对象（位于ng-repeat的父范围内）拥有N个人的属性。换句话说，如果你有一个ReservationCtrl，你希望它有一个以下形式的对象：

$scope.reservation = 
  [
    {name: "Foo", gender: "male", age: 23},
    {name: "Bar", gender: "female", age: 18},
    // and so on...
  ];

所以，定义一个控制器：

app.controller("ReservationCtrl", function($scope){
  $scope.reservation = [{}]; // array with the an uninitialized person
  $scope.addPerson = function(){ $scope.reservation.push({}); }
});

然后在视图中：

<div ng-repeat="person in reservation">
  <input ng-model="person.name" type="text">
  <label>Male:   
     <input ng-model="person.gender" name="gender{{$index}}" type="radio" value="male">
  </label>
  <label>Female: 
     <input ng-model="person.gender" name="gender{{$index}}" type="radio" value="female">
  </label>
  <input ng-model="person.age" type="number">
</div>
<button ng-click="addPerson()">Add another person</button>

plunker

angularjs ng-repeat，两个单选按钮无法正常工作

2 个答案: