Das Formular wird in AngularJS nicht in View und Server aktualisiert?

Question

Ich habe diesen Fehler in meiner Web-App. Also, ich habe ein Formular, wo, wenn ich das Formular bearbeite es auf Sicht und Server nicht aktualisiert. Was ich lösen möchte ist, wenn ich mein Formular bearbeite, möchte ich die Ansicht und den Server aktualisieren. Also, hier ist mein Code unten. Bitte überprüfen Sie meinen Code, wenn etwas falsch ist. Danke im Voraus. Irgendeine Hilfe?

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

Es gibt hier ein paar Probleme.

Daten vom Server sind nicht an den Controller gebunden, was bedeutet, dass sie in Ihrer Ansicht nicht angezeigt werden.

Die Eingänge zu dem Formular sind die Bindung an Alias-Namen und keine Mitglieder eines tatsächlichen Umfang

Nachdem Sie Änderungen an Ihren Daten einreichen, müssen Sie nach, um Updates von Ihrem Server

Der inactive Umfang Wert nicht aktualisiert wird Sie speichern Ihre Daten , was bedeutet, dass Ihre Schaltfläche "Speichern" nicht ausgeblendet wird, nachdem ein Formular abgeschickt wurde.

Der erste Schritt besteht darin, Ihre $scope.userInfo in Ihrem MyCtrl Controller zu füllen. Wenn Sie $scope.userInfo in Ihrem HomeController setzen, hat nur HomeController Zugriff auf $scope.userInfo und nicht MyCtrl.

Sie müssen Ihren Code, so dass MyCtrl Sätze $scope.userInfo in einem eigenen Rahmen ändern, damit sie Zugriff auf die Daten hat etwa so:

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

    // ... 

}); 

Jetzt müssen Sie tatsächlich den Eingang Ihres form an die binden Daten in Ihrem Umfang.

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

Es ist wichtig, sich daran zu erinnern, dass Angular in $scope an Daten gebunden werden muss, bevor es Änderungen in der DOM machen wird und mit person vom person in userInfo.lawyers ng-Repeat-Richtlinie verweist auf einen Alias ​​zu einem person und nicht auf die eigentlichen Daten im Bereich userInfo.

Nachdem Sie Ihre Änderungen einreichen Sie Ihre Liste mit neuen Daten von dem Server wollen gehen zu aktualisieren, so sind:

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

    }; 

    // ... 
}); 

schließlich für die Save Schaltfläche Fragen Sie müssen sicher sein, dass isactive Wert Der Bereich wird entsprechend festgelegt, wenn Sie dies tun und nicht im DOM angezeigt werden soll. Wenn Sie den Wert auf true setzen, wird die Einstellung false ausgeblendet. Die Schaltfläche "Bearbeiten" schaltet diesen Wert bereits für Sie ein, Sie können diesen Wert jedoch auch umschalten, wenn die Funktion ausgeführt wird, die ausgeführt werden soll.Sie können dies in der updateUser Funktion:

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

    }; 

    // ... 
}); 

Zusätzliche Ressourcen für AngularJS Bereiche können here finden.