表单不会在AngularJS的视图和服务器上更新？

Question

我在我的web应用程序中有这个错误。所以，我有一个表单，当我编辑表单时，它不会在视图和服务器上更新。我想要解决的是当我编辑我的表单时，我想更新视图和服务器。所以，下面是我的代码。请检查我的代码是否有错误。提前致谢。任何帮助？

here is my code.

var app = angular.module("MyApp", ['ngRoute', 'ui.bootstrap']); 
      app.controller('MyCtrl', function($scope, $window, people) { 





     people.getUserInfo().then(function (response) { 
      $scope.userInfo = response.data; 
     }); 

     $scope.inactive = true; 
     $scope.updateUser = function(person) { 
      people.updateUser(person); 
     }; 
     $scope.confirmedAction = function(person) { 
      var index = $scope.userInfo.lawyers.map(function(e) { 
       return e.id; 
      }).indexOf(person.id); 
      people.confirmUser(person.id).then(function(data){ }); 
      $scope.userInfo.lawyers.splice(index, 1); 
      console.log($scope.userInfo.lawyers); 
      $window.location.href = '#/lawyer'; 
     }; 
    }); 


}); 

about

<div ng-controller="MyCtrl"> 
    <div ng-repeat="person in userInfo.lawyers | filter : {id: lawyerId}"> 
     <a class="back" href="#/lawyer">Back</a> 
     <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive"> 
      Edit 
     </button> 
     <button type="submit" class="submit" ng-show="!inactive" ng-click="updateUser(person)">Save</button> 
     <a class="delete" ng-click="confirmedAction(person);" confirm-click>Confirm</a> 
     <div class="people-view"> 
      <h2 class="name">{{person.firstName}}</h2> 
      <h2 class="name">{{person.lastName}}</h2> 
      <span class="title">{{person.email}}</span> 
      <span class="date">{{person.website}}</span> 
     </div> 
     <div class="list-view"> 
      <form> 
       <fieldset ng-disabled="inactive"> 
        <legend>Info</legend> 
        <b>First Name:</b> 
        <input type="text" ng-model="person.firstName"> 
        <br> 
        <b>Last Name:</b> 
        <input type="text" ng-model="person.lastName"> 
        <br> 
        <b>Email:</b> 
        <input type="email" ng-model="person.email"> 
        <br> 
        <b>Website:</b> 
        <input type="text" ng-model="person.website"> 
        <br> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 

services to my backend

app.factory('people', function ($http) { 
    var service = {}; 
    service.getUserInfo = function() { 
     return $http.get('https://api-dev.mysite.com/admin/v1/lawyers'); 
    }; 
    service.confirmUser = function (lawyerId) { 
     return $http.put('https://api-dev.mysite.com/admin/v1/lawyers/'+lawyerId+'/confirm'); 
    }; 
    service.updateUser = function (person) { 
     return $http.put('https://api-dev.mysite.com/admin/v1/lawyers/'+ person.id, person); 
    }; 
    return service; 
}); 

HomeController

var isConfirmed = false; 
    app.controller('HomeController', function($scope, people) { 
    if (!isConfirmed) { 
    people.getUserInfo().then(function (response) { 

     $scope.userInfo = response.data; 


    }, function (error) { 
     console.log(error) 

    }); 


    } 
}); 

Answer 1

有几个问题在这里。

• 来自服务器的数据没有绑定到控制器，这意味着它不会显示在您的视图中。
• 到表单的输入绑定到别名，而不是
• 您提交更改的数据后，你需要从你的服务器
• 的inactive范围值后不更新获取更新的实际范围的任何成员你保存你的数据 这意味着你的'保存'按钮不会在提交表单后隐藏。

第一步是在您的MyCtrl控制器中填入您的$scope.userInfo。当您在HomeController中设置$scope.userInfo时，只有HomeController可以访问$scope.userInfo而不是MyCtrl。

你需要改变你的代码，这样MyCtrl套$scope.userInfo在它自己的范围，以便它可以访问像这样的数据：

app.controller('MyCtrl', function($scope, $window, people) { 
    // This function will now be called so that it can get the userInfo 
    // from the server and populate into the scope and give the controller 
    // access. 
    people.getUserInfo().then(function (response) { 
     $scope.userInfo = response.data; 
    }); 

    // ... 

}); 

现在，你需要你的form的输入实际结合数据在你的范围内。

  <form> 
      <fieldset ng-disabled="inactive"> 
       <legend>Info</legend> 
       <b>First Name:</b> 
       <input type="text" ng-model="userInfo.lawyers[$index].firstName"> 
       <br> 
       <b>Last Name:</b> 
       <input type="text" ng-model="userInfo.lawyers[$index].lastName"> 
       <br> 
       <b>Email:</b> 
       <input type="email" ng-model="userInfo.lawyers[$index].email"> 
       <br> 
       <b>Website:</b> 
       <input type="text" ng-model="userInfo.lawyers[$index].website"> 
       <br> 
      </fieldset> 
     </form> 

重要的是要记住，角度需要绑定到数据$scope之前，它会呈现在DOM变化和使用person从person in userInfo.lawyers NG重复指令的别名引用一个person，而不是实际的数据是非常重要的在userInfo范围内。

在您提交的变化，你会想更新来自服务器的新数据的列表，以便包括：

app.controller('MyCtrl', function($scope, $window, people) { 

    // ... 

    $scope.updateUser = function(person) { 

     people.updateUser(person) 
      // Now get the new data. 
      .then(function() { 
       return people.getUserInfo(); 
      }).then(function (response) { 
       // Apply the new data to the scope. 
       $scope.userInfo = response.data; 
      }); 

    }; 

    // ... 
}); 

最后，你需要确保的isactive价值Save按钮问题该范围适合于当您执行并且不希望它出现在DOM中时进行设置。将该值设置为true将其隐藏，而设置为false则将其隐藏。编辑按钮已经为您切换此值，但您也可以在要执行的功能完成时切换此值。您可以在updateUser功能做到这一点：

app.controller('MyCtrl', function($scope, $window, people) { 

    // ... 

    $scope.updateUser = function(person) { 

     // Hide the save button 
     $scope.inactive = true; 

     people.updateUser(person) 
      .then(function() { 
       return people.getUserInfo(); 
      }).then(function (response) { 
       $scope.userInfo = response.data; 
      }); 

    }; 

    // ... 
}); 

为AngularJS范围的其他资源可以发现here。