I am facing a challenge with my AngularJS application. It displays data from a server in a specific view structure, as shown below:
<table class="table table-striped">
<tr ng-repeat="query in saved_queries">
<td ng-click="fill()"><a>{{ query.query_string }}</a></td>
<td class="pull-right" ng-click="kill_entry({{query.id}})"><i class="glyphicon glyphicon-remove"></i></td>
</tr>
</table>
The 'saved_queries' data is fetched by clicking a button with the id "refresh" which triggers the 'refreshSubmit()' function from the controller:
angular.module('myApp')
.controller('QueryCtrl', ['$scope', 'Query', function ($scope, Query) {
$scope.kill_entry = function(id){
var kill = $.post('http://my_ip:3000/api/delete_query', {'id': id});
kill.done(function(result){
$('#refresh').click();
});
}
$scope.refreshSubmit = function(){
var savedQueries = $.post('http://my_ip:3000/api/saved_queries');
savedQueries.done(function(result){
$scope.saved_queries = result;
})
}
$scope.saveSubmit = function() {
var save_query = $.post('http://my_ip:3000/api/save_query', { 'query_string': $scope.query_box });
save_query.done(function(result){
$('#refresh').click();
});
}
}
])
However, I am encountering an issue where I have to click the "refresh" button twice in order for the view data to update properly after adding or removing a record.
It is not efficient and I am seeking insights on why this double-click issue is occurring.