フォームは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スコープ値が後に更新されていない
• サーバーから更新を取得する必要があります実際の範囲
• の任意のメンバーを別名に結合していませんあなたのデータを保存する これは、フォームが提出された後にあなたの保存ボタンが隠れないことを意味します。

$scope.userInfoの最初の手順で、MyCtrlコントローラにデータを入力しています。 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> 

それは角度が、それはDOMの変更をレンダリングする前$scope内のデータにバインドする必要があるとperson in userInfo.lawyers ngのリピートディレクティブからpersonを使用してpersonにではなく、実際のデータにエイリアスを参照することを覚えておくことが重要ですuserInfoスコープにあります。

あなたは、サーバーからの新しいデータであなたのリストを更新したいとしている変更を送信した後ので、含まれます：あなたはのisactive値ことを確認する必要がありSaveボタン問題の最後に

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

    }; 

    // ... 
}); 

を有効範囲は、DOMに表示させたくない場合に適切に設定されます。値をtrueに設定すると、表示されなくなり、falseに設定されます。編集ボタンはすでにこの値をトグルしますが、実行する機能が完了するとこの値を切り替えることもできます。あなたはupdateUser機能でこれを行うことができます：AngularJSスコープ用

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

    }; 

    // ... 
}); 

追加リソースがhere見つけることができます。