After displaying a table and a form on a page, I encountered an issue where the table does not update with new data when submitting the form. Even after refreshing the page, the new data is not reflected. As a newbie to Angular, I'm unsure of what exactly is causing this problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<body>
<div ng-app="myApp">
<div class="container">
<div ng-controller="getCtrl">
<table class="table table-stripped">
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr ng-repeat = "user in users">
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
</tr>
</table>
<div class="row" >
<form name="userForm" ng-submit="formSubmit()">
<div class="form-group">
<label>Nombre</label>
<input type="text" name="name" class="form-control" ng-model="user.name">
<span ng-show="errorName">{{errorName}}</span>
</div>
<div class="form-group">
<label>Apellido</label>
<input type="text" name="lastName" class="form-control" ng-model="user.lastName">
<span ng-show="errorName">{{errorName}}</span>
</div>
<div style="text-align:center">
<button type="submit" class="btn btn-primary" >Insertar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
The JavaScript file looks as follows:
var app = angular.module('myApp',[]);
app.controller('getCtrl',['$scope','$http',function($scope,$http){
$http.get("http://127.0.0.1:3000/api/Users")
.then(function(response){
$scope.users = response.data;
});
$scope.errorName = false;
$scope.formSubmit = function(){
$http.post("http://127.0.0.1:3000/api/Users",$scope.user)
.then(function(response){
});
};
}]);
Potential Solution:
As someone who is new to Angular, here is my proposed solution for the issue at hand. Would appreciate feedback on whether this implementation adheres to best practices:
var app = angular.module('myApp',[]);
app.controller('getCtrl',['$scope','$http',function($scope,$http){
$scope.makeGetRequest = function(){
$scope.users = {};
$http.get("http://127.0.0.1:3000/api/Users")
.then(function(response){
$scope.users = response.data;
});
}
$scope.errorName = false;
$scope.makeGetRequest();
$scope.formSubmit = function(){
$http.post("http://127.0.0.1:3000/api/Users",$scope.user)
.then(function(response){
$scope.makeGetRequest();
});
};
}]);