Initially, I am a bit perplexed as I begin working on this task. I have a straightforward table where the data is fetched from a database and inserted into the DOM using Angular.
The table comprises an option and its corresponding value. My goal is to allow the user to edit these values and then click on a "save" button, triggering an HTTP call to my backend with the updated details.
I've managed to lay down the basics - clicking on a button replaces the cell content with input fields:
Clicking on "Edit":
When clicking on "Cancel," it reverts back to the original state - so far, everything works smoothly.
However, the part that's troubling me now is how to create an array (possibly in JSON format) when the update button is pressed so that I can send it through an HTTP request.
I need a structure where each object in the array/JSON contains the "option" and the "value" for database matching purposes.
Here's a snippet of my HTML:
<div ng-hide="loading" class="table-responsive">
<table class="table table-striped table-compact table-bordered">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="setting in settings">
<td><< setting.option >> <i class="fa fa-question pull-right pointer" tooltip="<< setting.description >>" ></i></td>
<td ng-switch="status">
<input ng-switch-when="editable" type="text" class="form-control" value="<< setting.value >>" />
<span ng-switch-when="uneditable"><< setting.value >></span>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-hide="loading" ng-switch="status">
<button ng-switch-when="uneditable" ng-click="edit()" class="btn btn-sm btn-info">Edit</button>
<button ng-switch-when="editable" ng-click="save()" class="btn btn-sm btn-success">Update</button>
<button ng-switch-when="editable" ng-click="cancel()" class="btn btn-sm btn-danger">Cancel</button>
</div>
Lastly, here's my Angular controller:
app.controller('appSettingsController', function($scope, ApplicationSettings) {
$scope.settings = {};
$scope.loading = true;
$scope.status = 'uneditable';
// Fetch data for the table
ApplicationSettings.get()
.success(function(data) {
$scope.settings = data;
$scope.loading = false;
});
$scope.edit = function() {
$scope.status = 'editable';
$scope.updates = {};
};
$scope.cancel = function() {
$scope.status = 'uneditable';
};
$scope.save = function() {
// Construct Array/JSON of inputs
};
});
Any suggestions or thoughts on how to proceed? Could it be related to utilizing ng-model?