Angular 通过点击 tr 进行编辑

Question

我正在使用 Angular + Firebase + AngularFire 创建我自己的应用程序。我有 table 本书，我可以添加新书，现在我想实施 'edit' 操作：

我点击该行。
我被重定向到 'edit' 表单。
所有数据必须来自我点击的 table 行。

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

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

Answer 1

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

Answer 2

改变这个

<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

Answer 3

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

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

Answer 4

您没有在函数中分配正确的对象

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

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

Answer 5

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

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

Tapping into the currently bound row item can be done through the

gridItem scope variable, which points to the actual data item, and
gridDisplayItem, which points to the formatted item and should only be used for presentation purposes.

详情可阅读here.

Angular 通过点击 tr 进行编辑

Angular edit by clicking on a tr

javascript

jquery

angularjs

firebase

angularfire