Smart-Table - Select first row displayed (angularjs) - smart-table

Question

Is it possible to automatically select the first row when using smart-table. I have added the class st-selected conditionally using ng-class which highlights the row, but when I then select another row it does not deselect the first row.
I would be grateful of any help.
Thanks

Answer 1

I have just had a similar problem, but wanted to have a specified default selection, I solved the issue with allot of swearing and a directive.
(function(undefined) {
'use strict';
angular
.module('mymodule')
.directive('stDefaultSelection', function() {
return {
require: 'stTable',
restrict: 'A',
scope: {
selection: '=stDefaultSelection',
},
link: function link(scope, element, attrs, controller) {
scope.$watch('selection', function(newValue, oldValue) {
var selectionMode = 'single';
if (angular.isArray(newValue) && newValue.length > 1) {
selectionMode = 'multi';
}
if (angular.isArray(newValue)) {
newValue.forEach(function (row, index, array) {
controller.select(row, selectionMode);
});
} else {
controller.select(newValue, selectionMode);
}
});
}
};
});
})();
Then in your html:
<table st-table="myCtrl.data.records" st-safe-src="myCtrl.data.safeRecords" st-default-selection="myCtrl.defaultRecord">
Once the data has been set then set your default record and that may solve your problem.

Answer 2

You can use $watch operator and $filter operator to do the needful.
//fired when table rows are selected
$scope.$watch('displayedCollection', function (row) {
//get selected row
row.filter(function (r) {
if (r.isSelected) {
$scope.selectedId = r.id;
//getInfo(r.id);
}
else if (!$scope.rowCollection[0].isSelected) {
$scope.rowCollection[0].isSelected = true;
$scope.selectedId = $scope.rowCollection[0].id;
//getInfo($scope.rowCollection[0].id);
}
})
}, true);
This will select the selected row, and if no row is selected, it will by default select the row with index 0. (First Row)
You need to pass to attributes to your smart table:
<tr ng-repeat="row in rowCollection" st-select-row="row" st-select-mode="single">
You can make a css class to highlight the row:
.st-selected {
background-color: #ffd800;
}