Javascript 使用ng repeat的数据

我可以使用ng repeat在web应用程序上显示数据库中的用户表。我可以直接从web应用程序中添加和删除，但现在我正在尝试更新有关这些用户的信息。我想点击用户行上的一个按钮（每行显示一个用户的信息，1行=1个用户）。当我点击这个按钮时，我想制作一个表单，输入字段中填充实际值。 我只能通过点击这个按钮获取关于我的用户的信息，但我不知道如何将信息“发送”到这个表单

我的用户表：

<tr ng-repeat="user in users">
...
</tr>

...

但这样的事情根本不起作用：

<form>
  <label>Name</label>
  <input type="text" id="up_name" ng-model="user.name"/>
  <label>Age</label>
  <input type="text" id="up_age" ng-model="user.age"/>
  ...
</form>

名称
年龄
...

您可以执行以下操作：

<tr ng-repeat="user in users" ng-init="selectedUser = null">
   <td> {{ user.name }}</td>... <td ng-click="selectedUser = user"> edit </td> 
</tr>

<div ng-if="selectedUser">
   <form>
    <label>Name</label>
    <input type="text" id="up_name" ng-model="user.name"/>
    <label>Age</label>
    <input type="text" id="up_age" ng-model="user.age"/>
    ...
    </form>

</div>

{{user.name}}。。。编辑
名称
年龄
...

如果您正在使用此synthax，您的表单必须在您的ngRepeat中。这不是最好的方法，因为您将为用户提供一个表单

我建议你做些不同的事情。在控制器中，设置一个

edit（）

函数：

$scope.edit = function(user) {
    $scope.editedUser = user;
}

<tr ng-repeat="user in users" ng-click="edit(user)">
    ...
</tr>

单击表中的用户时，调用edit（）函数：

$scope.edit = function(user) {
    $scope.editedUser = user;
}

<tr ng-repeat="user in users" ng-click="edit(user)">
    ...
</tr>

...

现在，您可以以editedUser对象的形式进行编辑：

<form ng-if="editedUser">
    <label>Name</label>
    <input type="text" id="up_name" ng-model="editedUser.name"/>
    <label>Age</label>
    <input type="text" id="up_age" ng-model="editedUser.age"/>
    ...
</form>

名称
年龄
...

在

中插入input和span HTML指令，并在

和
ng开关默认值时使用
ng开关
：
ng开关只显示一个字段

<td class="sorting_1" ng-switch="mode">
    <input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.username">
    <span ng-switch-default id="item.username">{{item.username}}</span>
</td>

JS

$scope.editItem = function(oldData) {
      $scope.edit = angular.copy(oldData);
      $scope.mode = "edit";
    }

    $scope.updateItem = function(data, index) {
      $scope.$emit('update', data, index);
      $scope.mode = "default";
    }

输入框的值将使用更新

$scope.edit=angular.copy（旧数据）进入
editItem（）
函数

使用事件发射器修改主对象

$scope.$on('update', function(event, data, index) {
    angular.copy(data, $scope.items[index]);
  });

使用
angular。将
复制到深度克隆值，而不是将值作为引用传递

检查我想你说的是一种主细节ui模式

在这里，公众将解决这类问题