重載表格在AngularJS中不會更新？

Question

我正在創建一個表單，當用戶單擊編輯按鈕編輯文本時，它可以正常工作。但是，當用戶點擊更新按鈕然後重新加載頁面後，它不會在重新加載頁面後顯示更新的文本。 這裏是蹲點，它的工作，但下面的代碼不起作用，當頁面重新加載。 （我想只能用前端做到這一點）

http://plnkr.co/edit/yyDf2SuEvefLWIK13kS4?p=preview

這裏是我的代碼。

<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="people.first"> 
    <br> 
    <b>Last Name:</b> 
    <input type="text" ng-model="people.last"> 
    <br> 
    <b>Email:</b> 
    <input type="email" ng-model="people.email"> 
    <br> 
    <b>Phone:</b> 
    <input type="num" ng-model="people.phone"> 
    <br> 
    <b>Website:</b> 
    <input type="text" ng-model="people.website"> 
    <br> 
    <b>Education:</b> 
    <input type="text" ng-model="people.education"> 
    <br> 
    <b>Education Year:</b> 
    <input type="text" ng-model="people.year"> 

    <br> 
    <legend>Address</legend> 


<b>Street:</b> 
    <input type="text" ng-model="people.street"> 
    <br> 
    <b>City:</b> 
    <input type="text" ng-model="people.city"> 
    <br> 
    <b>State:</b> 
     <input type="text" ng-model="people.state"> 
     <br> 
     <b>Zip:</b> 
     <input type="text" ng-model="people.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="save()">Save</button> 



</form> 

</div> 
</div> 

App.js

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



app.controller('MyCtrl', function($scope) { 
    $scope.inactive = true; 
    $scope.save = function() { 

    $scope.msg = 'Data sent: '+ JSON.stringify($scope.people); 

    }; 

}); 

JSON文件

[ 
    { 
    "id": "0", 
    "first": "John", 
    "last": "Smith", 
    "img": "//placehold.it/100x100", 
    "title": "Family", 
    "date": "Joined 4/2/17", 
    "email": "jsmith@email.com", 
    "phone": "555-555-5555", 
    "website": "www.google.com", 
    "education": "NYU Law", 
    "year": "2008", 
    "street": "123 Main Street", 
    "city": "Los Angeles", 
    "state": "CA", 
    "zip": "1234567" 


    }, 
] 

控制器

app.controller('PeopleController',['$scope', 'people', '$routeParams', 
function($scope, people, $routeParams) { 
    people.success(function(data) { 
    $scope.people = data[$routeParams.id]; 


    }); 
}]); 

Answer 1

您可以嘗試使用防止默認處理程序：

ng-click="save($event)" 

在你的控制器，你可以把：

$scope.save = function (event) { 
    event.preventDefault(); 
    $scope.msg = 'Data sent: '+ JSON.stringify($scope.people); 
} 

Answer 2

進行永久更改，你必須將它存儲到某種存儲中。文件是好的，但它不是最好的選擇。所以你可以考慮使用本地存儲。這裏是如何處理 local-storage的好教程。所以控制器將會像

app.controller('myCtrl', ['$scope', function($scope){ 

    $scope.people = { 
     "first": "John", 
     "last": "Smith" 
    } 

    $scope.myObject = JSON.parse(localStorage.getItem('myObject')) || { 
     first : $scope.people.first, 
     last : $scope.people.last 
    }; 

    $scope.updateThingy = function(){ 
     $scope.people.first = $scope.myObject.first; 
     $scope.people.last = $scope.myObject.last; 
     localStorage.setItem('myObject', JSON.stringify($scope.myObject)); 
    }; 
}]); 

這裏是plunker。祝你好運