Search code examples
javascriptangularjssmart-table

Smart Table with Angular 1.5.8 - row select not working - scope not filled in


I've decided to incorporate https://lorenzofox3.github.io/smart-table-website/ into my application. The examples on the site are working fine, however, when I started integrating, I can't make row selection function.

The main difference between the demo site and me is I'm using Angular 1.5.8. I've debugged and identified the fragment, that made me suspicious:

ng.module('smart-table')
  .directive('stSelectRow', ['stConfig', function (stConfig) {
    return {
      restrict: 'A',
      require: '^stTable',
      scope: {
        row: '=stSelectRow'
      },
      link: function (scope, element, attr, ctrl) {
        var mode = attr.stSelectMode || stConfig.select.mode;
        element.bind('click', function () {
          scope.$apply(function () {
            ctrl.select(scope.row, mode);
          });
        });

        scope.$watch('row.isSelected', function (newValue) {
          if (newValue === true) {
            element.addClass(stConfig.select.selectedClass);
          } else {
            element.removeClass(stConfig.select.selectedClass);
          }
        });
      }
    };
  }]);

The function linkreceives scopeobject, where row is undefined, therefore the select function skips and nothing is made on the row.

I've replicated the issue on the pen: http://codepen.io/anon/pen/bwJqBw Filter and sort are working fine, only the row select is not.

How can I fix the issue and what is the cause? Has the syntax for scope binding changed? According to documentation it seems to be ok, but being an angular novice, it's hard for me to assert.


Solution

  • You need to use in st-select-row the same reference you are using in your ng-repeat, from your codepen, you are doing:

     <tr st-select-row="row" st-select-mode="multiple" ng-repeat="customer in displayedCustomers">
    

    And you should be doing:

    <tr st-select-row="customer" st-select-mode="multiple" ng-repeat="customer in displayedCustomers">