表格未在AngularJS中正确更新

时间:2017-04-26 22:39:12

标签: angularjs

所以,我在angularjs中有这个表单,当用户在典型的用户详细信息页面中编辑时:例如“John Smith”表单会更新。但是,让我们说如果用户进入其他用户详细信息页面,则该表单显示“John Smith”而不是“Jane Smith”。

  

这是我的代码。

    <div class="people-view">
  <h2 class="name">{{people.first}}</h2>
    <h2 class="name">{{people.last}}</h2>

  <span class="title">{{people.title}}</span>

  <span class="date">{{people.date}} </span>

</div>


<div ng-controller="MyCtrl">
<div class="list-view">

  <form>
    <fieldset ng-disabled="inactive">

  <legend>Basic Info</legend>

<b>First Name:</b>
  <input type="text" ng-model="myObject.first">
  <br>
  <b>Last Name:</b>
  <input type="text" ng-model="myObject.last">
  <br>
  <b>Email:</b>
  <input type="email" ng-model="myObject.email">
  <br>
  <b>Phone:</b>
  <input type="num"  ng-model="myObject.phone">
  <br>
  <b>Website:</b>
  <input type="text" ng-model="myObject.website">
  <br>
  <b>Education:</b>
  <input type="text" ng-model="myObject.education">
  <br>
  <b>Education Year:</b>
  <input type="text" ng-model="myObject.year">

  <br>
  <legend>Address</legend>


<b>Street:</b>
  <input type="text" ng-model="myObject.street">
  <br>
  <b>City:</b>
    <input type="text" ng-model="myObject.city">
    <br>
    <b>State:</b>
      <input type="text" ng-model="myObject.state">
      <br>
      <b>Zip:</b>
        <input type="text" ng-model="myObject.zip">
    <br>
  </fieldset>

    <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
          Edit
        </button>

    <button type="submit" class="submit" ng-show="!inactive" ng-click="update()">Update</button>




</form>

</div>
</div>
  

App.js

        var app = angular.module("Portal", ['ngRoute']);


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

 $scope.inactive = true;



 /*$scope.myObject = JSON.parse(localStorage.getItem('myObject')) || {
   first : $scope.people.first,
   last : $scope.people.last,
   email : $scope.people.email,
   phone : $scope.people.phone,
   website : $scope.people.website,
   education : $scope.people.education,
   year : $scope.people.year,
   street : $scope.people.street,
   city : $scope.people.city,
   state : $scope.people.state,
   zip : $scope.people.zip
 }; */

 scope.myObject = function () {
     var myObject = angular.fromJson(localStorage.getItem( 'myObject' ));
     if ( myObject  ) {
       $scope.myObject  = [];
       for (var i = 0; i < myObject.length; i++) {
         if (myObject[i].name) {
           $scope.myObject.push(myObject[i]);
         }
       }
     }

     $scope.update = function(){
         $scope.people.first = $scope.myObject.first;
         $scope.people.last = $scope.myObject.last;
         $scope.people.email = $scope.myObject.email;
         $scope.people.phone = $scope.myObject.phone;
         $scope.people.website = $scope.myObject.website;
         $scope.people.education = $scope.myObject.education;
         $scope.people.year = $scope.myObject.year;
         $scope.people.street = $scope.myObject.street;
         $scope.people.city = $scope.myObject.city;
         $scope.people.state = $scope.myObject.state;
         $scope.people.zip = $scope.myObject.zip;
      //   localStorage.setItem('myObject', JSON.stringify($scope.myObject));
            localStorage.setItem( 'myObject', angular.toJson( $scope.myObject ) );


     };



}); 

0 个答案:

没有答案