ng - 如果在点击＆＃34后保存更改＆＃34;按键

Question

我正在尝试更新信息，点击编辑更改按钮。更新信息后，我希望在单击“保存更改”按钮时隐藏表单来显示更新的信息。我的api正在运行，信息也在不断更新。但点击“保存更改”按钮后，<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> 无效。

info.html文件

<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>

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");

    };
});

info.js文件

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}
        });
    };    
});

authService.js文件

{{1}}

Answer 1

makeChanges永远不会变为false，

试试这个，

authService.postUpdatedInfo($scope.updatedInfoDetails)
.then(function(response){
    if(response.status == 200){
         $scope.updatedInfo = "You have successfully updated the changes";

        };
    });
    $scope.userEnteredInfo = false;
    $scope.makeChanges = false;
    console.log("success");

};

Answer 2

您永远不会将$scope.userEnteredInfo设置为true，您可以尝试以下代码：

authService.postUpdatedInfo($scope.updatedInfoDetails)
.then(function(response){
    if(response.status == 200){
         $scope.updatedInfo = "You have successfully updated the changes";
         $scope.userEnteredInfo = true;//set true here
         $scope.makeChanges = true;
         console.log("success");
        }
        else
        {
         // error if response  status other than 200
         $scope.userEnteredInfo = false;
         $scope.makeChanges = false;
         console.log("error");
        };
    });


};