My webpage contains a bs-table that retrieves data from an API call. When a row is clicked, another API call is made to fetch the data for that specific row from the database. The retrieved data is then stored in a scope variable and rendered on the page.
$('#table').on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
var indexId = $table.find($element).data('index');
var rowData = $table.bootstrapTable('getData')[indexId];
$scope.id = rowData.id;
$http.get(url + $scope.id)
.then(function (res) {
$scope.rowData = res.data.model;
console.log($scope.rowData);
$scope.rowKeys = Object.keys($scope.rowData);
});
$scope.$apply();
});
html:
<form style="padding: 15px" ng-submit="submitForm()">
<div class="form-group row">
<div ng-repeat="k in rowKeys | filter: '!id'" ng-model="rowValue">
<label for="rowValue" class="col-sm-2">
<!--{{k | hide:'.name'}}:-->
{{k }}:
</label>
<div class=" col-sm-2">
<input class="form-control rowValue" id="rowValue" value="{{rowData[k]}}"/>
</div>
</div>
</div>
<button type="submit" class="btn btn-default" ng-if="rowData" >Submit</button>
After making changes in the form fields, I want to submit the updated data back using ng-submit.
$scope.submitForm = function() {
$scope.$watch('rowData', function(newValue, oldValue) {
console.log('being watched oldValue:', oldValue, 'newValue:', newValue);
}, true);
$http({
method : 'PUT',
url : url + $scope.id,
data : $scope.rowData, //form
headers : {'Content-Type': 'application/json'}
})
.then(function (res) {
//console.log(res);
//console.log($scope.rowData);
return res;
});
};
I have implemented a $watch to detect changes in the scope variable, but the issue is that the console log shows the same values for both oldValue and newValue. Can anyone help me identify where I may be going wrong? Any assistance would be appreciated.