Angular edit by clicking on a tr

Angular edit by clicking on a tr

本文关键字：tr on clicking edit by Angular      更新时间：2024-01-15

我正在使用Angular+Firebase+AngularFire创建我自己的应用程序。我有一张书的表格，我可以添加新书，现在我想实现"编辑"操作：

  1. 我点击那一行
  2. 我被重定向到"编辑"表单
  3. 所有数据必须来自我单击的表行

问题是关于第三部分，我不知道如何从单击的行中获取所有数据。

这是<tr>:的HTML部分

<tr ng-click="bookCtrl.editBook(bookCtrl.book)" ng-repeat="book in bookCtrl.books">
    <td>{{ book.name }}</td>
    <td>{{ book.author }}</td>
    <td>{{ book.price }}</td>
    <td>{{ book.pubdate | date }}</td>
    <td>{{ book.coverUrl }}</td>
    <td>{{ book.pagesCount}}</td>
</tr>

我想我应该使用angular.element(event.currentTarget)或类似的东西，但这只是一个猜测。DOM大师，请告诉我：）

更改此

<tr ng-click="bookCtrl.editBook(bookCtrl.book)" ng-repeat="book in bookCtrl.books">

至

<tr ng-click="bookCtrl.editBook(book)" ng-repeat="book in bookCtrl.books">

JSFiddle 的类似示例

您在函数中缺少正确的对象

 <tr  ng-repeat="book in bookCtrl.books" ng-click="bookCtrl.editBook(book)">
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
<td>{{ book.pubdate | date }}</td>
<td>{{ book.coverUrl }}</td>
<td>{{ book.pagesCount}}</td>
</tr>

希望你能从这里访问数据。

使用Angular网格库，http://ui-grid.info.这是一篇关于它的好文章，http://brianhann.com/create-a-modal-row-editor-for-ui-grid-in-minutes.

function editRow(grid, row) {
    $modal.open({
      templateUrl: 'edit-modal.html',
      controller: ['$modalInstance', 'grid', 'row', RowEditCtrl],
      controllerAs: 'vm',
      resolve: {
        grid: function () { return grid; },
        row: function () { return row; }
      }
    });
  }

您可以使用ng repeat的$index属性，因此

ng-click="bookCtrl.editBook(bookCtrl.books[$index])" ng-repeat="book in bookCtrl.books track by $index">

这取决于您使用的网格库。我喜欢使用的一个基于角度的网格库是trNgGrid。我还使用了另一个带有trNgGrid的库ngDialog来实现您想要做的类似事情：弹出一个对话框来编辑单击行的详细信息。

trNgGrid有一些特殊的作用域变量gridItem和gridDisplayItem。文件报价：

点击当前绑定的行项目可以通过完成

指向实际数据项的gridItem范围变量，以及
gridDisplayItem，它指向格式化的项目，并且应该仅用于演示目的。

详细信息可在此处阅读。

相关文章：