How to use inline editing in angular Js without any buttons in the rows

Question

I have below table,

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

The controlling part which take the data is as below,

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

Everything works fine, but I want to use a Angular Js inline editor to edit the rows in the table. First the user can see the data which I get from the controller, then the user should be able to edit the rows. I have searched through the internet but I found inline editing tables which use button to edit and save. I don't want any buttons in my table rows. I want to bind data with the model. So that at the end I can take the data from the table via the model. Please help

There's an attribute called editable in html add it to your table data and set it to true like this contenteditable="true" — Sumanth Jois
– Sumanth Jois, Commented Apr 20, 2016 at 12:19
and link those data with your controller with help of ng-model — Sumanth Jois
– Sumanth Jois, Commented Apr 20, 2016 at 12:19

shamila · Accepted Answer · 2016-05-04 10:17:59Z

After searching in many areas I found an inline edit that do not need any button to edit. The code is as below,

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

The controller is as below,

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

Please install ng-inline-edit to use this method. Click https://github.com/tameraydin/ng-inline-edit to install ng-inline-edit

Collectives™ on Stack Overflow

How to use inline editing in angular Js without any buttons in the rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related