When I click the edit change button, I am updating information and then hiding the form to show the updated details by clicking on the Save Changes button. My API successfully updates the information, but for some reason, ng-if does not seem to work after clicking the Save Changes button.
info.html file
<div class="panel-body" ng-if="userEnteredInfo">
<div class="form-group">
<dl class="dl-horizontal form-info-table">
<dt>First Name:</dt>
<dd>{{user.basicInfo.firstName}}
</dd>
<dt>Last Name:</dt>
<dd>{{user.basicInfo.lastName}}</dd>
<dt>Status:</dt>
<dd>{{user.basicInfo.status}}</dd>
<dt>Work Location:</dt>
<dd>{{user.basicInfo.workLocation}}</dd>
<dt>Date of Birth:</dt>
<dd>{{user.basicInfo.dateOfBirth}}</dd>
<dt>Title:</dt>
<dd>{{user.basicInfo.title}}</dd>
</dl>
</div>
</div>
<div class="panel-body form-panel-box" ng-if="makeChanges" ng-submit="saveChanges(user)">
<form class="form-horizontal edit-changes-form">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">First Name:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="firstName" ng-model="user.basicInfo.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lastName">Last Name:
</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="lastName" ng-
model="user.basicInfo.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="status">Status:
</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="status" ng-
model="user.basicInfo.status">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Work Location">Work
Location:</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="work" ng-
model="user.basicInfo.location">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="dateOfBirth">Date of
Birth</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="dateOfBirth" ng-
model="user.basicInfo.dateOfBirth">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-3">
<input type="text/number" class="form-control" id="title"
ng-model="user.basicInfo.title">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button type="submit" class="btn btn-default">Save
Changes</button>
</div>
</div>
</form>
info.js file
app.controller('info',function($scope,$localStorage,authService,$http){
$scope.user = $localStorage.userObject;
$scope.userEnteredInfo = true;
$scope.editChanges = function(){
$scope.makeChanges = true;
$scope.userEnteredInfo= false;
}
//Edit changes for updating information//
$scope.saveChanges = function(userData){
$scope.updatedInfoDetails = {
firstName: userData.basicInfo.firstName,
lastName: userData.basicInfo.lastName,
status: userData.basicInfo.status,
WorkLocation: userData.basicInfo.location,
dateOfBirth: userData.basicInfo.dateOfBirth,
title: userData.basicInfo.title
}
authService.postUpdatedInfo($scope.updatedInfoDetails)
.then(function(response){
if(response.status == 200){
$scope.updatedInfo = "You have successfully updated the changes";
};
});
$scope.userEnteredInfo = false;
$scope.makeChanges = true;
console.log("success");
};
});
authService.js file
app.service('authService', function($localStorage,$http) {
this.postUpdatedInfo = function(userChangedInfo){
console.log('the user data is: ', userChangedInfo);
var urlForChangingInfo = "/api/users/" + $localStorage.getUserId;
return $http({
method:'PUT',
url:urlForChangingInfo,
data:userChangedInfo,
headers:{"x-access-token":$localStorage.authToken}
});
};
});