Question

我可以使用ng-repeat在我的网络应用程序中显示我的数据库中的用户表。我可以直接从Web应用程序添加和删除，但现在我正在尝试更新有关这些用户的信息。我想点击用户行上的一个按钮（每行显示一个用户的信息，1行= 1个用户），当我点击这个按钮时，我想创建一个输入字段填充实际值的表单。我只能通过点击此按钮获取有关我的用户的信息，但我不知道如何发送＆＃34;这种形式的信息。

我的用户表：

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

Answer 1

您可以做的是：

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

Answer 2

如果您使用的是此合成器，则表单必须位于ngRepeat中。这不是最佳方式，因为您将有一个用户表单。

我会建议你一些不同的东西。在控制器中，设置edit()功能：

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

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

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

您现在可以在editUser对象的表单中进行编辑：

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

Answer 3

我认为你在谈论一种主 - 细节 ui模式。

这是一个解决此类问题的公共plunker

Answer 4

在ng-switch中插入输入和范围HTML指令并使用ng-switch-when：ng-switch-default＆amp; <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>只显示一个字段。

ng-switch

你需要为它编写一个自定义指令。编写自定义指令的原因是<td>的值将与个人而不是全局相关联。

在上一个<td ng-switch="mode"> <button class="btn btn-success btn-xs edit" ng-switch-when="edit" ng- click="updateItem(edit, index)"> <i class="fa fa-floppy-o"></i> </button> <button class="btn btn-success btn-xs" ng-switch-default ng- click="editItem(item)"> <i class="fa fa-pencil-square-o "></i> </button> </td>标记中添加：其中包含编辑和更新按钮：

$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";
    }

<强> JS

$scope.edit = angular.copy(oldData);

输入框的值将使用
更新 editItem()进入$scope.$on('update', function(event, data, index) { angular.copy(data, $scope.items[index]); });函数。

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

angular.copy

使用>>> embeddings = {} >>> with open("pretrained_embeddings.txt", "rb") as f: ... for line in f.xreadlines(): ... line = line.decode("utf-8") ... columns = line.strip().split() ... embeddings[columns[0]] = [float(n) for n in columns[1:]] ... >>> embeddings["the"] [-0.0279698616277, -0.00822567637943, -0.066859518431, 0.0152934683231, -0.0329719520937, 0.0530985715151, 0.0346279291928, 0.000898163363809, -0.0342044668875, -0.0358478199459, 0.0330627337979, -0.0291780565785, -0.050316270082, 0.0226246942919, -0.0999551118641, -0.0211768282161, -0.0650169654368, -0.13170513108, 0.0136621823624, 0.00761099698762, -0.0747038745232, -0.0309831087459, -0.0281774157081, -0.0381752846197, 0.000854164869137, 0.118230081556, -0.0544820178539, -0.0259578123228, -0.0250848970404, 0.0432551614539, 0.0604299831315, 0.0605994794422, -0.0652365866148, 0.0741619690129, -0.0122427203782, -0.0486630776978, 0.0266766400501, -0.0575422338293, -0.0120115890454, 0.067022888369, 0.0563923322428, 0.116347799963, 0.0272241149902, -0.0271056717851, -0.0876134412848, -0.0160824708647, 0.0478176382685, -0.0278610721008, -0.043103116023, -0.123507487497, -0.0286480325182, -0.00985009337681, -0.00749645238334, -0.00322952663845, -0.046423238718, 0.103032221776, 0.0821490881533, -0.121380150997, -0.00599957532621, -0.0843011157914, -0.0667407039306, 0.0204320098169, -0.0953102074899, -0.0644943672828, -0.00133722007224, 0.00249399062204, -0.0199877549741, -0.0494372284268, 0.00730022281006, 0.100155611334, 0.0158984940368, 0.0919811737074, -0.0762293413195, 0.110083862374, 0.0495974423547, -0.0737607844265, 0.0507363907294, 0.01065877457, -0.0101547411817, 0.0437805443228, 0.0801814086384, -0.0739505163318, 0.0359545673486, 0.122458949531, -0.0289695742598, 0.0247212132806, -0.0799729263198, -0.0204555870693, -0.00530952298573, -0.0580316010527, 0.0849861556452, -0.0386267797212, 0.0264685290268, -0.0680456213105, 0.0826555349612, -0.0264161763876, -0.0995871582083, 0.0344213033507, 0.0533503097378, 0.037602190303, -0.061794122114, -0.00452664681682, -0.025897662482, -0.0804463278447, -0.0725472056937, -0.109343313871, 0.0121977936453]深度克隆值，而不是将值作为参考传递。

检查 http://codepen.io/sumitridhal/pen/YVPQdW

使用ng-repeat的数据

4 个答案: