如何从 ng-repeat 项目填充表单

Question

I want to be able to click on an ng-repeat ed row in a table and populate a form from the rows data. What do I need to have in my editplayer() function?

Heres the table and the form

 <table class="table table-condensed table-striped table-responsive"> <thead> <th></th> <th>Name</th> <th></th> <th></th> <th></th> <th></th> </thead> <tbody> <tr ng-repeat="player in players" ng-model="players"> <td><input type="checkbox" name="" id=""></td> <td ng-click="editPlayer($index)">{{ player.name }}</td> <td><i class="fa fa-paper-plane"></i></td> <td><i class="fa fa-comment"></i></td> <td><i class="fa fa-phone"></i></td> <td><i class="fa fa-edit"></i></td> </tr> </tbody> </table>

 <form id="playerForm" name="playerForm" ng-model="thisplayer" novalidate> <input type="text" id="id" name="id" placeholder="id" class="form-control" ng-model="player.id" ></input> <div class="form-group"> <input type="text" id="player" name="name" required placeholder="Name" class="form-control" ng-model="player.name" ng-required="true" >{{ player.name }}</input> <span ng-show="playerForm.name.$touched && playerForm.newplayer.name.$invalid">The name is required.</span> </div> <div class="form-group"> <input type="email" id="email" required Placeholder="Email" class="form-control" ng-model="player.email">{{ player.email }} </input> </div> <div class="form-group"> <input type="text" id="tel" required Placeholder="Tel" class="form-control" ng-model="player.tel">{{ player.tel }}</input> </div> <div class="form-group"> <input type="text" id="initials" required Placeholder="Initials" class="form-control" ng-model="player.initials">{{ player.initials }}</input> </div> <div class="form-group"> <button id="btnPlayerAdd" name="btnPlayerAdd" class="btn btn-success" type="submit" ng-click="addPlayer($event)" ng-show="!isUpdate">Add player</button> <button id="btnPlayerSave" name="btnPlayerSave" class="btn btn-success" type="submit" ng-click="updatePlayer($event)" ng-show="isUpdate">Update player</button> </div> </form>

Answer 1

You can follow this:

  <tr ng-repeat="player in players">
        <td>{{player.Name}}</td>
        <td><input type="button" value="Edit" class="btn btn-info btn-sm" ng-click="editplayer(player)" /></td>

    </tr>

And in editplayer() :

$scope.editplayer= function (player) {
        $scope.player.id = player.Id;
        $scope.player.name = player.Name;
      }

Answer 2

Use editPlayer(player) .

Assuming editPlayer populates the form, just pass it the player object.