Javascript 如何在没有任何按钮的行中使用angular Js中的内联编辑

我有下面的表格

<div class="md-dialog-main">
                        <table class="me-hours-table">
                            <thead>
                                <th>Product Type</th>
                                <th>Product Name</th>
                                <th>
                                    <select>
                                        <option  style="background-color:'#FF0000'">weight</option>
                                        <option  style="background-color:'#FF0000'">size</option>
                                    </select>
                                </th>
                                <th>Price</th>
                                <th>Qty</th>
                            </thead>
                            <tbody>
                                <tr ng-repeat="data in variants">
                                    <td>{{data.type}}</td>
                                    <td>{{data.name}}</td>
                                    <td>{{data.size}}</td>
                                    <td>{{data.price}}</td>
                                    <td>{{data.qty}}</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

---

一切正常，但我想使用Angular Js内联编辑器编辑表中的行。首先，用户可以看到我从控制器获得的数据，然后用户应该能够编辑行。我已经在互联网上搜索过了，但我找到了内联编辑表，这些表使用按钮进行编辑和保存。我的表行中不需要任何按钮。我想用模型绑定数据。最后，我可以通过模型从表中获取数据。请帮助

在许多区域搜索后，我发现了一个不需要任何按钮即可编辑的内联编辑。代码如下：

 $scope.idDetails = function(product){
        var ids={
            mainId : product.mainId,
            childId : product.childId
            };
            console.log(ids.childId);
             commerceService.getVariants(ids.childId).
                    success(function(data) {
                     toastr.success('Successfully saved', 'Awsome!', {
                         closeButton: true
                     });
                    $scope.variants=[{
                        type: "cloth",
                        name: data[0].name,
                        size: "10",
                        price: data[0].price,
                        qty: "1"
                    }];
                    console.log($scope.variants.name);
                    }).error(function(err) {
                        toastr.error('Saving detals was not Successful', 'Warning', {
                            closeButton: true
                        });
                    });
        }

<div class="md-dialog-main">
                        <table class="me-hours-table">
                            <thead>
                                <th>Product Type</th>
                                <th>Product Name</th>
                                <th>
                                    <select ng-model="selection">
                                        <option value="weight">weight</option>
                                        <option value="size">size</option>
                                    </select>
                                </th>
                                <th>Price</th>
                                <th>Qty</th>
                            </thead>
                            <tbody>

                                <tr ng-repeat="data in variants">
                                    <td
                                       inline-edit="data.sku"
                                       inline-edit-callback="skuUpdateHandler(newValue)"
                                       inline-edit-btn-edit=""
                                       inline-edit-on-blur="save"
                                       inline-edit-on-click></td>
                                    <td
                                       ng-model="data.name">{{data.name}}</td>
                                    <td
                                       inline-edit="data.sizeOrweight"
                                       inline-edit-callback="sizeUpdateHandler(newValue)"
                                       inline-edit-btn-edit=""
                                       inline-edit-on-blur="save"
                                       inline-edit-on-click></td>
                                    <td
                                       inline-edit="data.price"
                                       inline-edit-callback="priceUpdateHandler(newValue)"
                                       inline-edit-btn-edit=""
                                       inline-edit-on-blur="save"
                                       inline-edit-on-click></td>
                                    <td
                                       inline-edit="data.qty"
                                       inline-edit-btn-edit=""
                                       inline-edit-on-blur="save"
                                       inline-edit-on-click></td>
                                </tr>
                                    <td 
                                       inline-edit-callback="qtyUpdateHandler(newValue)"
                                       inline-edit-btn-edit=""
                                       inline-edit-on-blur="save"
                                       inline-edit-on-click></td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

$scope.skuUpdateHandler = function(newValue) {
  console.log(newValue);
};
$scope.sizeUpdateHandler = function(newValue) {
  console.log(newValue);
};
$scope.priceUpdateHandler = function(newValue) {
  console.log(newValue);
};

请安装ng inline edit以使用此方法。点击

---

要安装ng inline edit

在html中有一个名为“可编辑”的属性，请将其添加到表格数据中，并将其设置为true，如下图所示contenteditable=“true”，并在ng模型的帮助下将这些数据与控制器链接