通过单击 tr 进行角度编辑答案

【问题标题】：Angular edit by clicking on a tr通过单击 tr 进行角度编辑
【发布时间】：2016-07-25 12:09:50
【问题描述】：

我正在使用 Angular + Firebase + AngularFire 来创建我自己的应用程序。我有一个书架，我可以添加新书，现在我想实现“编辑”操作：

我点击行。
我被重定向到“编辑”表单。
所有数据必须来自我点击的表格行。

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

这是<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 大师，请帮帮我:)

【问题讨论】：

editBook 函数有什么作用？重定向到另一个页面？
是的，现在只是重定向。
这样的？ jsfiddle.net/katowulf/m86Lcj9s
@Kato 是的，有点 :) 感谢您的提示！

标签： javascript jquery angularjs firebase angularfire

【解决方案1】：

改变这个

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

Similiar example at JSFiddle

【讨论】：

哇，它有效！能不能给我一个简单的解释？
ng-repeat 转发器正在提取bookCtrl.books 中的每个对象，因此当前对象将是book 而不是bookCtrl.book。当点击当前书本对象时传递给编辑方法。

【解决方案2】：

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

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

希望您可以从中访问数据。

【讨论】：

【解决方案3】：

使用 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; }
      }
    });
  }

【讨论】：

【解决方案4】：

你可以使用 ng-repeat 的 $index 属性，所以

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

【讨论】：

【解决方案5】：

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

trNgGrid 有一些特殊的范围变量 gridItem 和 gridDisplayItem 用于此。引用文档：

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

gridItem 范围变量，指向实际的数据项，
gridDisplayItem，指向格式化的项，应该只用于演示目的。

详情可阅读here。

【讨论】：