Currently, I am working on developing a compact spreadsheet feature for my angular application. My goal is to replicate a common functionality found in spreadsheets where users can click on a cell and then modify its value using a larger input field at the top of the sheet. However, I am facing a challenge in dynamically assigning the model of a cell to the large input when a user clicks on the cell.
There are various details to consider regarding the blur and focus of the cells. Additionally, the example I provided is a simplified version, as the actual spreadsheet can have any number of rows and columns. My main query revolves around how to dynamically link a cell's model to the large input so that it can function as a proxy input for the cell. If this approach is not feasible or practical, I am open to alternative suggestions on how to tackle this issue.
At this stage, I have made some progress, but I am uncertain if my current approach within this directive is viable. I would appreciate any insights or ideas on how to improve this functionality.
index.html
<table ng-controller="SpreadsheetCtrl" custom-spreadsheet>
<thead>
<tr>
<th colspan="3">
<input type="text" style="width: 100%" />
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>
<input ng-model="row.A" type="text" />
</td>
<td>
<input ng-model="row.B" type="text" />
</td>
<td>
<input ng-model="row.C" type="text" />
</td>
</tr>
</tbody>
</table>
script.js
var app = angular.module('app', []);
app.controller('SpreadsheetCtrl', function($scope) {
$scope.rows = [
{A: 'a', B: 'b', C: 'c'},
{A: 'a', B: 'b', C: 'c'},
{A: 'a', B: 'b', C: 'c'}
];
});
app.directive('customSpreadsheet', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var primary = element.find('thead input');
element.on('focus', 'tbody input', function () {
primary.attr('ng-model', $(this).attr('ng-model'));
});
}
};
})