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

时间:2016-03-20 01:57:36

标签: javascript angularjs firebase-realtime-database

我希望能够点击表格中的ng-repeat ed行,并从行数据中填充表格。我的editplayer()函数需要什么?

表格和表格



<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>
&#13;
&#13;
&#13;

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

你可以这样说:

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

在editplayer()中:

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

答案 1 :(得分:0)

使用editPlayer(player)

假设editPlayer填充表单,只需将player对象传递给它。