带两个单选按钮的angularjs ng-repeat无法正常运行

Question

Hi i tried to create a dynamic form with radio button, after in my result i cannot able to form correctly

My code is

<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>

I my scenario i have to select each row's gender but i cannot able to set parameters to run correctly

screenshot of my work

Plunkr link

Answer 1

Don't use checked . You should initialize you model with value then it will be checked:

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

Also I bet you mean name="gender.{{$index}}" instead of name="gender.$index"

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

Answer 2

It's not fully clear from you description what "run correctly" means, so I'm going to guess a bit.

You want to have a reservation object (that lives in the parent scope of the ng-repeat ) hold the properties of N people. In other words, if you had a ReservationCtrl , you want it to have an object of the following form:

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

So, define a controller:

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

Then in the View:

<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