Tips for updating data in the AngularJS Smart TableWould you like to learn

Question

Tips for updating data in the AngularJS Smart TableWould you like to learn

I'm still getting the hang of Java Script, so please bear with me if this question is a bit basic.

Does anyone know how to edit rows in tables using Smart-Table with AngularJS? I can't seem to find any tutorials that match the new version of Smart-Table. My goal is to create a simple form for users to input the opening hours for a specific place.

I've managed to add and remove rows from the table using buttons, but when I try to make the content editable by adding "contenteditable=true", none of the changes are saved when I update the object. I realize that "contenteditable" is an HTML5 attribute and not directly related to Smart-Table, but I'm not sure how else to update the data or retrieve the updated information.

The data is fetched from the AngularJS controller through the mean.js routes.

<div class="controls">
    <table st-table="place.openHours" class="table table-striped">
        <thead>
        <tr>
            <th>Day</th>
            <th>Opening Time</th>
            <th>Closing Time</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in place.openHours" contenteditable="true" >
            <td>{{row.day}}</td>
            <td>{{row.open}}</td>
            <td>{{row.close}}</td>
            <button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
                <i class="glyphicon glyphicon-remove-circle">
                </i>
            </button>
        </tr>
        </tbody>
    </table>

    <button type="button" ng-click="addOpenHour(row)" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> Add new Row
    </button>
</div>

In the JavaScript file:

    $scope.removeOpenHour = function removeOpenHour(row) {
        var index = $scope.place.openHours.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }

    $scope.addOpenHour = function addOpenHour() {
        $scope.place.openHours.push(
        {
            day: 'Monday',
            open: 540,
            close: 1080
        });
    };

javascript angularjs contenteditable smart-table

Answer 1

Answer №1

After exploring various options, I found a solution by combining code snippets from this source with my own code.

Here is the snippet from the HTML file:

<tr ng-repeat="row in place.openHours">
   <td><div contentEditable="true" ng-model="row.day">{{row.day}}</div></td>
   <td><div contentEditable="true" ng-model="row.open">{{row.open}}</div></td>
   <td><div contentEditable="true" ng-model="row.close">{{row.close}}</div></td>
   <td>
   <button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
      <i class="glyphicon glyphicon-remove-circle">
      </i>
   </button>
</td>

And here is the JavaScript snippet:

myApp.directive('contenteditable', function() {
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
        // view -> model
        elm.bind('blur', function() {
            scope.$apply(function() {
                ctrl.$setViewValue(elm.html());
            });
        });

        // model -> view
        ctrl.render = function(value) {
            elm.html(value);
        };

        elm.bind('keydown', function(event) {
            console.log("keydown " + event.which);
            var esc = event.which == 27,
                el = event.target;

            if (esc) {
                console.log("esc");
                ctrl.$setViewValue(elm.html());
                el.blur();
                event.preventDefault();
            }

        });

    }
};
});

Answer 2

After exploring various options, I found a solution by combining code snippets from this source with my own code.

Here is the snippet from the HTML file:

<tr ng-repeat="row in place.openHours">
   <td><div contentEditable="true" ng-model="row.day">{{row.day}}</div></td>
   <td><div contentEditable="true" ng-model="row.open">{{row.open}}</div></td>
   <td><div contentEditable="true" ng-model="row.close">{{row.close}}</div></td>
   <td>
   <button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
      <i class="glyphicon glyphicon-remove-circle">
      </i>
   </button>
</td>

And here is the JavaScript snippet:

myApp.directive('contenteditable', function() {
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
        // view -> model
        elm.bind('blur', function() {
            scope.$apply(function() {
                ctrl.$setViewValue(elm.html());
            });
        });

        // model -> view
        ctrl.render = function(value) {
            elm.html(value);
        };

        elm.bind('keydown', function(event) {
            console.log("keydown " + event.which);
            var esc = event.which == 27,
                el = event.target;

            if (esc) {
                console.log("esc");
                ctrl.$setViewValue(elm.html());
                el.blur();
                event.preventDefault();
            }

        });

    }
};
});

Answer 3

Answer №2

Here is my solution:

Using Angular directive :

app.directive("markdown", function() {

  return {
    restrict: 'EA',
    scope: {

        value: '='},
    template: '<span ng-click="edit()" ng-bind="value"></span><input ng-blur="blur()" ng-model="value"></input>',
    link: function($scope, element, attrs) {
        // Let's get a reference to the input element, as we'll want to reference it.
        var inputElement = angular.element(element.children()[1]);

        // This directive should have a set class so we can style it.
        element.addClass('edit-in-place');

        // Initially, we're not editing.
        $scope.editing = false;

        // ng-click handler to activate edit-in-place
        $scope.edit = function() {
            $scope.editing = true;

            // We control display through a class on the directive itself. See the CSS.
            element.addClass('active');

            // And we must focus the element. 
            // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
            // we have to reference the first element in the array.
            inputElement[0].focus();
        };

        // When we leave the input, we're done editing.

        $scope.blur = function() {
            $scope.editing = false;
            element.removeClass('active');
        }
    }
  };

});

Utilizing HTML:

 <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">

    <thead>
      <tr>
          <th st-sort="sku">SKU</th>
          <th st-sort="skuSupplier">SKU Supplier</th>
          <th st-sort="name">Description</th>
          <th st-sort="quantity">Quantity</th>
          <th st-sort="price">Unit Price</th>
          <th st-sort="total">Total</th>
      </tr>
      <tr>
          <th colspan="5"><input st-search="" class="form-control" placeholder="Search product ..." type="text"/></th>
          </tr>
    </thead>
    <tbody>
       <tr ng-repeat="row in displayedCollection">
          <td><markdown value="row.sku"></markdown></td>
          <td><markdown value="row.skuSupplier"></markdown></td>
          <td><markdown value="row.name"></markdown></td>
          <td><markdown value="row.quantity"></markdown></td>
          <td><markdown value="row.price"></markdown></td>
          <td><markdown value="row.total"></markdown></td>
          <td>
              <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                 <i class="glyphicon glyphicon-remove-circle"></i>
              </button>
          </td>
      </tr>
    </tbody>
  </table>

Answer 4

Here is my solution:

Using Angular directive :

app.directive("markdown", function() {

  return {
    restrict: 'EA',
    scope: {

        value: '='},
    template: '<span ng-click="edit()" ng-bind="value"></span><input ng-blur="blur()" ng-model="value"></input>',
    link: function($scope, element, attrs) {
        // Let's get a reference to the input element, as we'll want to reference it.
        var inputElement = angular.element(element.children()[1]);

        // This directive should have a set class so we can style it.
        element.addClass('edit-in-place');

        // Initially, we're not editing.
        $scope.editing = false;

        // ng-click handler to activate edit-in-place
        $scope.edit = function() {
            $scope.editing = true;

            // We control display through a class on the directive itself. See the CSS.
            element.addClass('active');

            // And we must focus the element. 
            // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
            // we have to reference the first element in the array.
            inputElement[0].focus();
        };

        // When we leave the input, we're done editing.

        $scope.blur = function() {
            $scope.editing = false;
            element.removeClass('active');
        }
    }
  };

});

Utilizing HTML:

 <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">

    <thead>
      <tr>
          <th st-sort="sku">SKU</th>
          <th st-sort="skuSupplier">SKU Supplier</th>
          <th st-sort="name">Description</th>
          <th st-sort="quantity">Quantity</th>
          <th st-sort="price">Unit Price</th>
          <th st-sort="total">Total</th>
      </tr>
      <tr>
          <th colspan="5"><input st-search="" class="form-control" placeholder="Search product ..." type="text"/></th>
          </tr>
    </thead>
    <tbody>
       <tr ng-repeat="row in displayedCollection">
          <td><markdown value="row.sku"></markdown></td>
          <td><markdown value="row.skuSupplier"></markdown></td>
          <td><markdown value="row.name"></markdown></td>
          <td><markdown value="row.quantity"></markdown></td>
          <td><markdown value="row.price"></markdown></td>
          <td><markdown value="row.total"></markdown></td>
          <td>
              <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                 <i class="glyphicon glyphicon-remove-circle"></i>
              </button>
          </td>
      </tr>
    </tbody>
  </table>

Tips for updating data in the AngularJS Smart TableWould you like to learn

Answer №1

Answer №2

Similar questions

Persisting Undefined Values Even After Proper Prop Passing

Is there a way to retrieve the current route on a custom 404 page in Next.JS?

Is there a way to continually monitor for collisions between webpage elements?

Switching jQuery on various sections of a webpage

Creating dynamic div shapes in HTML is a fun and creative way

"Creating a dynamic Map using the HERE Maps API and adjusting its size: A step-by-step guide

Having difficulty scrolling through content on Onsen UI with AngularJS

JavaScript - How can I prevent receiving multiple alerts during long polling success?

Detect a custom button click event to trigger a re-render of dates in the controller for the AngularJS date picker

Guide to choosing and unchoosing a div / button using angularJs

Using interpolation brackets in Angular2 for variables instead of dots

Is there a way to update a div element with an image without having to refresh

executing functions that return a JSX component within the render method

I am looking to customize the folder name dynamically in the flowFactoryProvider configuration so that I can subsequently send it to the upload.php file for the purpose of storing

Retrieve a key from the JSON response and then transmit it through a socket

Conflicts in SwiperJS Timeline Management

In Node.js and JavaScript, attempt to access a variable within the catch block in order to remove a Cloudinary image in the event

"Encountering issues with autocomplete feature loading empty data when attempting to populate several fields simultaneously

Delay the loading of templates when utilizing ng-controller

At what point does the chaining of async/await come to an end?