javascript - 使用ng-repeat的数据

标签 javascript angularjs forms

我可以使用 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>

最佳答案

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

我会建议你一些不同的东西。在您的 Controller 中,设置一个 edit() 函数:

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

单击表中的用户时,调用 edit() 函数:

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

关于javascript - 使用ng-repeat的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43740217/

相关文章:

函数的 JavaScript 链接方法 - TypeError : (intermediate value). methodName is not a function

javascript - 如何知道网站是否使用 cookie?

javascript - 实时区域不适用于动态页面标题 - angularjs

php - 基于可变数据,将一行数据带到不同的页面

javascript - 从 React 的 useState 钩子(Hook)改变状态

JavaScript Ajax 登录 PHP 页面请求不起作用

javascript - 测试 Angular 解析方法

javascript - 如何在循环 ng-repeat 时增加计数器变量?

javascript - 表单提交功能不起作用

jquery - 在选择更改时使用 JQuery 选择文件后清除文件输入字段