I am currently developing an application to showcase specific data using a grid and a data source.
Let me present the issue first and then elaborate on the situation.
$scope.onSelectRow = function (row, rowId) {
var a = row;
var b = _.findWhere($scope.gridData.rows, {id: rowId});
var c = a === b;
console.log('Does JS think they are the same ? -> ' + c);
console.log('Does Angular think they are the same ? -> ' + angular.equals(a, b));
console.log('\nThe objects:');
console.log(a);
console.log(b);
console.log('\nThe indexes:'); // what i really need
console.log('Index of a:' + $scope.gridData.rows.indexOf(row));
console.log('Index of b:' + $scope.gridData.rows.indexOf(b));
{
This code snippet aims to determine the index of the element. The element initially belonged to the $scope.gridData.rows array, which is displayed as a grid on the screen. The onSelectRow function triggers when a row is selected and receives 2 arguments:
- row -> representing the entire table row directly linked to the $scope.gridData.rows array
- rowId -> denoting the Id property of the row element (same as 'row' argument where rowId = row.id )
The output of these lines of code looks like this at one point:
However, upon updating and reloading the data, if someone clicks on a row again and the same logic repeats, the output changes to:
In the initial scenario, both Angular and JS recognize the objects as equal. Yet in the subsequent picture, JS fails to identify equality while Angular does... despite being essentially the same, as evident from the printed details and common origin.
Ultimately, my concern lies in obtaining the index of the selected element in the elements array without manually searching for it, since the correct object should ideally be returned by the table.
Any suggestions?