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 link
receives scope
object, 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.
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">